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 page. 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 #

Name Type Parameters Description default
color String RGB or HEX Component color Slider. primary
icon String Material Icons Determines the icon displayed when displaying the value.
icon-pack String Icon Pack Class Name Icon 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
step Number 1-100 Determines by how much slider value should increment/decrement when using arrow keys. 1
ticks Boolean true, false Add the dividing lines of the allowed values. false
text-fixed String Determines the fixed text next to the value. false
min Number Determines the minimum number admitted. 0
max Number Determine the maximum number allowed. 100