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

Rounded:sm

Check out this example of a rounded slider tooltip.

Show code

Rounded:md

Check out this example of a smooth slider tooltip.

Show code

Rounded:lg

Check out this example of a curved slider tooltip.

Show code

Rounded:full

Check out this example of a circle slider tooltip.

Show code

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

Multiple handles

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

Show code

Format

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

Show code

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