BaseSlider

This component implements a range slider and prints the selected values. It receives a threshold prop to set the limits and uses v-model to get and set the selected values.

It makes use of the nouslider library @see https://refreshless.com/nouislider/ for the slider implementation.

Props

Name	Description	Type	Default
threshold	The threshold prop sets the limits for the slider.	{ min: number; max: number }	() => ({ min: 0, max: Number.MAX_SAFE_INTEGER })
modelValue	The modelValue prop sets the initial values for the slider.	{ min: number; max: number }
contentClass	Class to be able to customize slider styles.	string	''

Events

Event name	Properties	Description
update:modelValue

Slots

Name	Description	Bindings (name - type - description)
default	Default selected range rendering. This slot will be used by default for rendering	rangeSelected number[] - The selected range values. Min position 0, Max position 1.

Examples

This component renders a slider and the selected values. The component needs the threshold for the slider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ), which are passed using the threshold prop and the selected range, which is passed in using the v-model.

Default usage

It is required to send the value prop which holds the selected values.

With threshold

Customized usage

Overriding the slots

It is possible to override the default slot to customize the layout for the selected values.

It is also possible to add inputs to complement the slider and allow to change the selected values manually.