KSlider

Drag the slider within a fixed range.

Install

pnpm

pnpm add @ikun-ui/slider

yarn

yarn add @ikun-ui/slider

npm

npm install @ikun-ui/slider

Basic usage

value: 0

format: (value) => {return 'Ikun'+value}

value: 0

step: 10

Vertical mode

Setting the vertical attribute to true enables vertical mode.

value: 0

Disabled slider

Use disabled attribute to determine whether a slider is disabled.

value: 0

Maximum and minimum values

The max and min attributes limit the maximum and minimum values of the slider

value: 15

min: 10

max: 20

Custom Render slider

Rendering slider content using slots

value: 0

Sizes

Add size attribute to change the size of Slider. It supports sm, md and lg.

Discrete values

Set step size with the step attribute. You can display breakpoints by setting the showStops attribute

value: 0

value: 0

Slider Props

Name	Type	Default	Description
value	number	0	Binding value
vertical	boolean	false	Vertical mode
format	(value: number) => number | string	(value: number) => value	Tooltip format value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step size
showStop	boolean	false	Display breakpoints
disabled	boolean	false	Whether Slider is disabled
size	sm | md | lg	md	Size of slider.
cls	string	-	Additional class
attrs	Record<string, string>	{}	Additional attributes

Slider Events

Name	Description	Type
change	Fires when the value changes and the mouse is released	(value: CustomEvent)=> void
input	Trigger in real time when data changes	(value: CustomEvent)=> void

Slider Slots

Name	Description
buttonRender	Customize slider button content