Slider
Drag the slider within a fixed range.
Basic usage
The current value is displayed when the slider is being dragged.
Customize the initial value of the slider by setting the binding value.
export function SliderBasic() { const [value1, setValue1] = useState<SliderValue>(0); const [value2, setValue2] = useState<SliderValue>(0); const [value3, setValue3] = useState<SliderValue>(0); const [value4, setValue4] = useState<SliderValue>(0); const [value5, setValue5] = useState<SliderValue>(0); return ( <> <div style={block}> <span style={label}>Default value</span> <ElSlider style={slider70} value={value1} onChange={setValue1} /> </div> <div style={block}> <span style={label}>Customized initial value</span> <ElSlider style={slider70} value={value2} onChange={setValue2} /> </div> <div style={block}> <span style={label}>Hide Tooltip</span> <ElSlider style={slider70} value={value3} onChange={setValue3} showTooltip={false} /> </div> <div style={block}> <span style={label}>Format Tooltip</span> <ElSlider style={slider70} value={value4} onChange={setValue4} formatTooltip={(val) => val / 100} /> </div> <div style={block}> <span style={label}>Disabled</span> <ElSlider style={slider70} value={value5} onChange={setValue5} disabled /> </div> </> );}
Discrete values
The options can be discrete.
Set step size with the step attribute. You can display breakpoints by setting the show-stops attribute.
Breakpoints not displayed export function SliderDiscreteValues() { const [value1, setValue1] = useState<SliderValue>(0); const [value2, setValue2] = useState<SliderValue>(0); return ( <> <div style={block}> <span style={label}>Breakpoints not displayed</span> <ElSlider style={slider70} value={value1} onChange={setValue1} step={10} /> </div> <div style={block}> <span style={label}>Breakpoints displayed</span> <ElSlider style={slider70} value={value2} onChange={setValue2} step={10} showStops /> </div> </> );}
Set value via a input box.
Set the show-input attribute to display an input box on the right.
export function SliderWithInput() { const [value, setValue] = useState<SliderValue>(0); return ( <div style={block}> <ElSlider style={slider} value={value} onChange={setValue} showInput /> </div> );}
Sizes
export function SliderSizes() { const [value, setValue] = useState<SliderValue>(0); return ( <div style={{ maxWidth: 600 }}> <ElSlider value={value} onChange={setValue} showInput size="large" /> <ElSlider style={sliderSizes} value={value} onChange={setValue} showInput /> <ElSlider style={sliderSizes} value={value} onChange={setValue} showInput size="small" /> </div> );}
Placement
You can custom tooltip placement.
export function SliderPlacement() { const [value1, setValue1] = useState<SliderValue>(0); const [value2, setValue2] = useState<SliderValue>(0); const [value3, setValue3] = useState<SliderValue>(0); const [value4, setValue4] = useState<SliderValue>(0); return ( <> <div style={block}> <ElSlider style={slider} value={value1} onChange={setValue1} /> </div> <div style={block}> <ElSlider style={slider} value={value2} onChange={setValue2} placement="bottom" /> </div> <div style={block}> <ElSlider style={slider} value={value3} onChange={setValue3} placement="right" /> </div> <div style={block}> <ElSlider style={slider} value={value4} onChange={setValue4} placement="left" /> </div> </> );}
Range selection
Selecting a range of values is supported.
Setting the range attribute activates range mode, where the binding value is an array made up of two boundary values.
export function SliderRange() { const [value, setValue] = useState<SliderValue>([4, 8]); return ( <div style={block}> <ElSlider style={slider} value={value} onChange={setValue} range showStops max={10} /> </div> );}
Vertical mode
Setting the vertical attribute to true enables vertical mode. In vertical mode, the height attribute is required.
export function SliderVertical() { const [value, setValue] = useState<SliderValue>(0); return ( <div style={block}> <ElSlider style={slider} value={value} onChange={setValue} vertical height="200px" /> </div> );}
Show marks
Setting this marks attribute can show mark on slider.
export function SliderShowMarks() { const [value, setValue] = useState<SliderValue>([30, 60]); return ( <div style={block}> <ElSlider style={slider} value={value} onChange={setValue} range marks={marksShow} /> </div> );}
Restrict value 2.13.6
Set step="mark" to restrict the slider value to marks.
export function SliderRestrictValue() { const [value1, setValue1] = useState<SliderValue>(37); const [value2, setValue2] = useState<SliderValue>(50); const [value3, setValue3] = useState<SliderValue>([13, 42]); return ( <> <div style={block}> <ElSlider style={slider} value={value1} onChange={setValue1} vertical height="200px" marks={marks1} placement="right" formatTooltip={(v) => `${v}°C`} step="mark" /> </div> <div style={blockSpaced}> <ElSlider style={slider} value={value2} onChange={setValue2} marks={marks2} step="mark" /> </div> <div style={blockSpaced}> <ElSlider style={slider} value={value3} onChange={setValue3} range marks={marks3} step="mark" /> </div> </> );}
API
Attributes
| Name | Description | Type | Default |
|---|
| model-value / v-model | binding value | number / array | 0 |
| min | minimum value | number | 0 |
| max | maximum value | number | 100 |
| disabled | whether Slider is disabled | boolean | false |
| step | step size, can be a number or 'mark' 2.13.6 to restrict values to marks. When set to 'mark', the marks attribute must be set | number / string | 1 |
| show-input | whether to display an input box, works when range is false and step is not 'mark' | boolean | false |
| show-input-controls | whether to display control buttons when show-input is true | boolean | true |
| size | size of the slider wrapper, will not work in vertical mode | enum | default |
| input-size | size of the input box, when set size, the default is the value of size | enum | default |
| show-stops | whether to display breakpoints | boolean | false |
| show-tooltip | whether to display tooltip value | boolean | true |
| format-tooltip | format to display tooltip value | Function | — |
| range | whether to select a range | boolean | false |
| vertical | vertical mode | boolean | false |
| height | slider height, required in vertical mode | string | — |
| aria-label a11y 2.7.2 | native aria-label attribute | string | — |
| range-start-label | when range is true, screen reader label for the start of the range | string | — |
| range-end-label | when range is true, screen reader label for the end of the range | string | — |
| format-value-text | format to display the aria-valuenow attribute for screen readers | Function | — |
| tooltip-class | custom class name for the tooltip | string | — |
| placement | position of Tooltip | enum | top |
| marks | marks, type of key must be number and must in closed interval [min, max], each mark can custom style | object | — |
| validate-event | whether to trigger form validation | boolean | true |
| persistent 2.9.5 | when slider tooltip inactive and persistent is false , tooltip will be destroyed. persistent always be false when show-tooltip is false | boolean | true |
| label a11y deprecated | native aria-label attribute | string | — |
Events
| Name | Description | Type |
|---|
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | Function |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | Function |
Type Declarations
Show declarations
type SliderMarks = Record<number, string | { style: CSSProperties; label: any }>
type Arrayable<T> = T | T[]
