Slider
Installation
npx shadcn@latest add https://ui.timkit.cn/r/slider.json
Usage
import { Slider } from "@/components/ui/slider"
Examples
Slider · Simple slider
Loading preview...
Slider · Disabled slider
Loading preview...
Slider · Slider with square thumb
Loading preview...
Slider · Slider with solid thumb
Loading preview...
Slider · Slider with tiny thumb
Loading preview...
Slider · Slider with reference labels
Loading preview...
Slider · Slider with ticks
Loading preview...
Slider · Slider with output
Loading preview...
Slider · Slider with labels
Loading preview...
Slider · Slider with labels and tooltip
Loading preview...
Slider · Dual range slider
Loading preview...
Slider · Dual range slider with output
Loading preview...
Slider · Volume slider
Loading preview...
Slider · Slider with multiple thumbs
Loading preview...
Slider · Reset
Loading preview...
Slider · Slider with input
Loading preview...
Slider · Rate your experience
Loading preview...
Slider · Rate your experience
Loading preview...
Slider · Enter minimum value
Loading preview...
Slider · Decrease value
Loading preview...
Slider · Price range slider
Loading preview...
Slider · Vertical slider
Loading preview...
Slider · Slider with input
Loading preview...
Slider · Vertical slider
Loading preview...
Slider · Enter value
Loading preview...
Slider · Price range
Loading preview...
Slider · 60 Hz
Loading preview...
Structured API
Component
slider
Logic
zag / slider
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | slider | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | https://ui.timkit.cn/r/tooltip.json, use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The controlled value. |
| min | number | 0 | The minimum value. |
| max | number | 100 | The maximum value. |
| step | number | 1 | The step value. |
| disabled | boolean | false | Whether the slider is disabled. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Callback called when value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The slider container |
| track | part | - | The slider track |
| range | part | - | The filled part of the track |
| thumb | part | - | The handler to slide |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Slider · Simple slider
- Slider · Disabled slider
- Slider · Slider with square thumb
- Slider · Slider with solid thumb
- Slider · Slider with tiny thumb
- Slider · Slider with reference labels
- Slider · Slider with ticks
- Slider · Slider with output
- Slider · Slider with labels
- Slider · Slider with labels and tooltip
- Slider · Dual range slider
- Slider · Dual range slider with output
- Slider · Volume slider
- Slider · Slider with multiple thumbs
- Slider · Reset
- Slider · Slider with input
- Slider · Rate your experience
- Slider · Rate your experience
- Slider · Enter minimum value
- Slider · Decrease value
- Slider · Price range slider
- Slider · Vertical slider
- Slider · Slider with input
- Slider · Vertical slider
- Slider · Enter value
- Slider · Price range
- Slider · 60 Hz
- API Reference
Slider
Installation
npx shadcn@latest add https://ui.timkit.cn/r/slider.json
Usage
import { Slider } from "@/components/ui/slider"
Examples
Slider · Simple slider
Loading preview...
Slider · Disabled slider
Loading preview...
Slider · Slider with square thumb
Loading preview...
Slider · Slider with solid thumb
Loading preview...
Slider · Slider with tiny thumb
Loading preview...
Slider · Slider with reference labels
Loading preview...
Slider · Slider with ticks
Loading preview...
Slider · Slider with output
Loading preview...
Slider · Slider with labels
Loading preview...
Slider · Slider with labels and tooltip
Loading preview...
Slider · Dual range slider
Loading preview...
Slider · Dual range slider with output
Loading preview...
Slider · Volume slider
Loading preview...
Slider · Slider with multiple thumbs
Loading preview...
Slider · Reset
Loading preview...
Slider · Slider with input
Loading preview...
Slider · Rate your experience
Loading preview...
Slider · Rate your experience
Loading preview...
Slider · Enter minimum value
Loading preview...
Slider · Decrease value
Loading preview...
Slider · Price range slider
Loading preview...
Slider · Vertical slider
Loading preview...
Slider · Slider with input
Loading preview...
Slider · Vertical slider
Loading preview...
Slider · Enter value
Loading preview...
Slider · Price range
Loading preview...
Slider · 60 Hz
Loading preview...
Structured API
Component
slider
Logic
zag / slider
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | slider | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | https://ui.timkit.cn/r/tooltip.json, use-machine | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The controlled value. |
| min | number | 0 | The minimum value. |
| max | number | 100 | The maximum value. |
| step | number | 1 | The step value. |
| disabled | boolean | false | Whether the slider is disabled. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Callback called when value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The slider container |
| track | part | - | The slider track |
| range | part | - | The filled part of the track |
| thumb | part | - | The handler to slide |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Slider · Simple slider
- Slider · Disabled slider
- Slider · Slider with square thumb
- Slider · Slider with solid thumb
- Slider · Slider with tiny thumb
- Slider · Slider with reference labels
- Slider · Slider with ticks
- Slider · Slider with output
- Slider · Slider with labels
- Slider · Slider with labels and tooltip
- Slider · Dual range slider
- Slider · Dual range slider with output
- Slider · Volume slider
- Slider · Slider with multiple thumbs
- Slider · Reset
- Slider · Slider with input
- Slider · Rate your experience
- Slider · Rate your experience
- Slider · Enter minimum value
- Slider · Decrease value
- Slider · Price range slider
- Slider · Vertical slider
- Slider · Slider with input
- Slider · Vertical slider
- Slider · Enter value
- Slider · Price range
- Slider · 60 Hz
- API Reference