Documentation

Use @vueform/slider to render fancy sliders in you forms with or without tooltips, and the ability to merge them.

This component is provided by the @vueform/slider library.

Rounded: none

Check out this example of a straight slider tooltip.

Show code
vue

Rounded: sm

Check out this example of a rounded slider tooltip.

Show code
vue

Rounded: md

Check out this example of a smooth slider tooltip.

Show code
vue

Rounded: lg

Check out this example of a curved slider tooltip.

Show code
vue

Rounded: full

Check out this example of a circle slider tooltip.

Show code
vue

Color

Slider components and tooltips can have different colors. Use the built-in color classes to change the color of the slider and the tooltip.

Show code
vue

Multiple handles

Sliders can have multiple handles when the data structure requires it. Check out this example for more details.

Show code
vue

Format

Slide tooltips content can be formatted using the format prop. Check out the code example for more details about usage.

Show code
vue

Merging

In more complex examples, you might need to merge multiple tooltips into one at some point. Check out this example for more details.

Show code
vue