Slider Component

Slider component allows users to select a value or a range by sliding within a fixed interval.

Basic Usage

Basic slider for selecting a single value within a continuous or discrete interval.

Basic Slider

Current value: 50

Disabled State

Show Code

Range Selection

Set the range attribute to enable range selection, suitable for scenarios where you need to select a numerical interval.

Basic Range Selection

Current value: [ 20, 60 ]

Range Selection with Step

Current value: [ 20, 80 ]

Show Code

Show Stops

When step is not 1, you can set the show-stops attribute to display stops, making it clearer for users to know the selectable values.

Show Stops (Step 10)

Current value: 40

Show Stops (Step 25)

Current value: 50

Show Code

Slider with Marks

Use the marks attribute to customize marks on the slider, each mark can be simple text or an object with custom styles.

Slider with Marks

Current value: 30

Range Slider with Marks

Current value: [ 20, 60 ]

Custom Styled Marks

Current value: 50

Show Code

Vertical Slider

Set the vertical attribute to true to make the slider vertical, and you need to set height to specify the slider height.

Basic Vertical Slider

Current value: 50

Vertical Slider with Stops

Current value: 30

Vertical Range Slider

Current value: [ 20, 70 ]

Show Code

Slider with Input

Slider can be combined with number input for more precise numerical input.

Slider with Number Input

Range Slider with Number Inputs

-

Show Code

Tooltip Settings

You can customize the slider's tooltip information through show-tooltip, format-tooltip, and placement attributes.

Default Tooltip

Hide Tooltip

Custom Tooltip Format

Different Tooltip Positions

Top:

Right:

Bottom:

Left:

Show Code

Event Handling

Slider component provides change and input events, triggered when value change is completed and during value change process respectively.

Current value: 50

Event Log:

Show Code

Slider API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	number / number[]	—	—
min	Minimum value	number	—	0
max	Maximum value	number	—	100
disabled	Whether disabled	boolean	—	false
step	Step size	number	—	1
size	Scrollbar size (width/height)	number	—	6
show-stops	Whether to show stops	boolean	—	false
show-tooltip	Whether to show tooltip	boolean	—	true
format-tooltip	Function to format tooltip	(val: number) => string	—	—
range	Whether to enable range selection	boolean	—	false
vertical	Whether in vertical mode	boolean	—	false
height	Slider height, required in vertical mode	string	—	—
tooltip-class	Custom class name for tooltip	string	—	—
placement	Tooltip placement	string	top / right / bottom / left	top
marks	Marks	Record<number, string | MarkObject>	—	—
debounce	Input debounce delay (ms)	number	—	300
status	Status type	string	success / exception / warning	—

Events

Event Name	Description	Parameters
change	Triggered when value change is completed	(value: number | number[])
input	Triggered during value change process	(value: number | number[])

Slots

Slot Name	Description	Scope Parameters
button	Custom slider button	{ value: number, index: number }

Mark Object Type

When using object format to define marks, it can contain the following properties:

Property	Description	Type
label	Text displayed on mark	string
style	Custom style for mark	Record<string, string>

Style Variables

The slider component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$theme-color-success	Theme color - Success
$theme-color-warning	Theme color - Warning
$theme-color-danger	Theme color - Danger
$border-color-default	Border color - Default