Slider

Change the values with very good UX.

Default

To implement a Slider we have the vs-slider component.

Color

You can change the slider's color with the property color. You can also add the main colors like: primary, success,danger, warning,dark.

Ticks

With Ticks you can allow the user to select a value inside a range of allowed values. With the property step you can change the distance between each Tick. If you want decimal steps, just set the property step-decimals to true.

Range

With Range you can allow the user to select a range inside a range of allowed values. You can use the v-model property with Array and a minimum and maximum value ​​represented as: [min, max]

Icons

You can add an icon with the icon property to better representation the sliders to the user.

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons pageopen in new window. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

Text Fixed

Determine the text that will be fixed next to the value with the property text-fixed

Change Method

You can add a function that will be triggered every time the value changes with @change="MyFunction"

TIP

You can change the minimum or maximum number admitted with the properties

  • min
  • max

55

API #

NameTypeParametersDescriptiondefault
colorStringRGB or HEXComponent color Slider.primary
iconStringMaterial IconsDetermines the icon displayed when displaying the value.
icon-packStringIcon Pack Class NameIcon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.material-icons
stepNumber1-100Determines by how much slider value should increment/decrement when using arrow keys.1
ticksBooleantrue, falseAdd the dividing lines of the allowed values.false
text-fixedStringDetermines the fixed text next to the value.false
minNumberDetermines the minimum number admitted.0
maxNumberDetermine the maximum number allowed.100