Multi Range Slider

Vue Bootstrap 5 Multi Range Slide component

Vue slider is an interactive component that lets the user swiftly slide through possible values spread over a desired range. .

Note: Read the API tab to find all available options and advanced customization

Basic example

Multi-range Slider starts with max 100 and min 0 values.

Show code

Basic example with values

You can show values in the another element in dom

Value:
First:
Second:
Show code

One range

You can set a one range to your slider with oneRange property.

Show code

Start Values

You can change start values to ranges with firstValue and secondValue properties. Or use v-model to get two-way binding.

Value:
Show code

Tooltips

You can set tooltip to ranges with thumb property.

Show code

Step example

You can set a step to the ranges with step attribute.

Show code