A Slider component for displaying current value and intervals in range.
To input a value in a range.
Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';
const App: React.FC = () => {
const [disabled, setDisabled] = useState(false);
const onChange = (checked: boolean) => {
setDisabled(checked);
};
return (
<>
<Slider defaultValue={30} disabled={disabled} />
<Slider range defaultValue={[20, 50]} disabled={disabled} />
Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
</>
);
};
export default App;
You can add an icon beside the slider to make it meaningful.
import React, { useState } from 'react';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
import { Slider } from 'antd';
interface IconSliderProps {
max: number;
min: number;
}
const IconSlider: React.FC<IconSliderProps> = (props) => {
const { max, min } = props;
const [value, setValue] = useState(0);
const mid = Number(((max - min) / 2).toFixed(5));
const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
return (
<div className="icon-wrapper">
<FrownOutlined className={preColorCls} />
<Slider {...props} onChange={setValue} value={value} />
<SmileOutlined className={nextColorCls} />
</div>
);
};
const App: React.FC = () => <IconSlider min={0} max={20} />;
export default App;
.icon-wrapper {
position: relative;
padding: 0px 30px;
}
.icon-wrapper .anticon {
position: absolute;
top: -2px;
width: 16px;
height: 16px;
color: rgba(0, 0, 0, 0.25);
font-size: 16px;
line-height: 1;
}
.icon-wrapper .icon-wrapper-active {
color: rgba(0, 0, 0, 0.45);
}
.icon-wrapper .anticon:first-child {
left: 0;
}
.icon-wrapper .anticon:last-child {
right: 0;
}The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.
import React from 'react';
import { Slider } from 'antd';
const onChange = (value: number | [number, number]) => {
console.log('onChange: ', value);
};
const onAfterChange = (value: number | [number, number]) => {
console.log('onAfterChange: ', value);
};
const App: React.FC = () => (
<>
<Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
<Slider
range
step={10}
defaultValue={[20, 50]}
onChange={onChange}
onAfterChange={onAfterChange}
/>
</>
);
export default App;
The vertical Slider.
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';
const style: React.CSSProperties = {
display: 'inline-block',
height: 300,
marginLeft: 70,
};
const marks: SliderMarks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: { color: '#f50' },
label: <strong>100°C</strong>,
},
};
const App: React.FC = () => (
<>
<div style={style}>
<Slider vertical defaultValue={30} />
</div>
<div style={style}>
<Slider vertical range step={10} defaultValue={[20, 50]} />
</div>
<div style={style}>
<Slider vertical range marks={marks} defaultValue={[26, 37]} />
</div>
</>
);
export default App;
Using reverse to render slider reversely.
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';
const App: React.FC = () => {
const [reverse, setReverse] = useState(true);
return (
<>
<Slider defaultValue={30} reverse={reverse} />
<Slider range defaultValue={[20, 50]} reverse={reverse} />
Reversed: <Switch size="small" checked={reverse} onChange={setReverse} />
</>
);
};
export default App;
Synchronize with InputNumber component.
import React, { useState } from 'react';
import { Col, InputNumber, Row, Slider, Space } from 'antd';
const IntegerStep: React.FC = () => {
const [inputValue, setInputValue] = useState(1);
const onChange = (newValue: number) => {
setInputValue(newValue);
};
return (
<Row>
<Col span={12}>
<Slider
min={1}
max={20}
onChange={onChange}
value={typeof inputValue === 'number' ? inputValue : 0}
/>
</Col>
<Col span={4}>
<InputNumber
min={1}
max={20}
style={{ margin: '0 16px' }}
value={inputValue}
onChange={onChange}
/>
</Col>
</Row>
);
};
const DecimalStep: React.FC = () => {
const [inputValue, setInputValue] = useState(0);
const onChange = (value: number) => {
if (isNaN(value)) {
return;
}
setInputValue(value);
};
return (
<Row>
<Col span={12}>
<Slider
min={0}
max={1}
onChange={onChange}
value={typeof inputValue === 'number' ? inputValue : 0}
step={0.01}
/>
</Col>
<Col span={4}>
<InputNumber
min={0}
max={1}
style={{ margin: '0 16px' }}
step={0.01}
value={inputValue}
onChange={onChange}
/>
</Col>
</Row>
);
};
const App: React.FC = () => (
<Space style={{ width: '100%' }} direction="vertical">
<IntegerStep />
<DecimalStep />
</Space>
);
export default App;
Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.
import React from 'react';
import { Slider } from 'antd';
const formatter = (value: number) => `${value}%`;
const App: React.FC = () => (
<>
<Slider tooltip={{ formatter }} />
<Slider tooltip={{ formatter: null }} />
</>
);
export default App;
Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';
const marks: SliderMarks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
label: <strong>100°C</strong>,
},
};
const App: React.FC = () => (
<>
<h4>included=true</h4>
<Slider marks={marks} defaultValue={37} />
<Slider range marks={marks} defaultValue={[26, 37]} />
<h4>included=false</h4>
<Slider marks={marks} included={false} defaultValue={37} />
<h4>marks & step</h4>
<Slider marks={marks} step={10} defaultValue={37} />
<h4>step=null</h4>
<Slider marks={marks} step={null} defaultValue={37} />
</>
);
export default App;
#components-slider-demo-mark h4 {
margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
margin-bottom: 44px;
}When tooltip.open is true, ToolTip will always show, or ToolTip will not show anyway, even if dragging or hovering.
import React from 'react';
import { Slider } from 'antd';
const App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;
export default App;
Make range track draggable when set range.draggableTrack.
import React from 'react';
import { Slider } from 'antd';
const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;
export default App;
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Whether get focus when component mounted | boolean | false | |
| defaultValue | The default value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | 0 | [0, 0] | |
| disabled | If true, the slider will not be intractable | boolean | false | |
| keyboard | Support using keyboard to move handlers | boolean | true | 5.2.0+ |
| dots | Whether the thumb can drag over tick only | boolean | false | |
| included | Make effect when marks not null, true means containment and false means coordinative | boolean | true | |
| marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style | object | { number: ReactNode } | { number: { style: CSSProperties, label: ReactNode } } | |
| max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to | number | 0 | |
| range | Dual thumb mode | boolean | false | |
| reverse | Reverse the component | boolean | false | |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null | number | null | 1 | |
| tooltip | The tooltip relate props | tooltip | - | 4.23.0 |
| value | The value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | - | |
| vertical | If true, the slider will be vertical | boolean | false | |
| onAfterChange | Fire when onmouseup is fired | (value) => void | - | |
| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | |
| trackStyle | The style of slider track (the active range) | CSSProperties | - | |
| railStyle | The style of slider rail (the background) | CSSProperties | - | |
| handleStyle | The style of slider handle | CSSProperties | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| draggableTrack | Whether range track can be drag | boolean | false | 4.10.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| open | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | 4.23.0 |
| placement | Set Tooltip display position. Ref Tooltip | string | - | 4.23.0 |
| getPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | Slider will pass its value to formatter, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode | null | IDENTITY | 4.23.0 |
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus |