Change the values with very good UX.
You can change the slider's color with the property color
. You can also add the main colors like: primary
, success
,danger
, warning
,dark
.
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.
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]
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.
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
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 |