import React from 'react'; import { Slider } from '@douyinfe/semi-ui'; () => ( <div> <div> <div>Default</div> <Slider showBoundary={true}></Slider> </div> <br/> <br/> <div> <div>Range</div> <Slider defaultValue={[20, 60]} range></Slider> </div> <br/> <br/> <div> <div>Disabled</div> <Slider defaultValue={40} disabled></Slider> </div> </div> );

import React from 'react'; import { Slider, InputNumber } from '@douyinfe/semi-ui'; class InputSlider extends React.Component { constructor(props) { super(); this.state = { value: 10 }; this.getSliderValue = this.getSliderValue.bind(this); } getSliderValue(value) { if (isNaN(Number(value))){ return; } this.setState({ value: value / 1 }); } render() { const { value } = this.state; return ( <div> <div style={{ width: 320, marginRight: 15 }}> <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider> </div> <InputNumber onChange={(v) => this.getSliderValue(v)} style={{ width: 100 }} value={value} min={0} max={100} /> </div> ); } }

import React from 'react'; import { Slider } from '@douyinfe/semi-ui'; () => ( <div> <Slider tipFormatter={v => (`${v}%`)} getAriaValueText={v => (`${v}%`)}/> <br/> <br/> <Slider tipFormatter={null} /> </div> );

import React from 'react'; import { Slider } from '@douyinfe/semi-ui'; () => ( <div> <div>step=10</div> <Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider> <br/> <br/> <div>step=0.1</div> <Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider> <br/> <br/> <div>Marks</div> <Slider marks={{ 20: '20°C', 40: '40°C' }} defaultValue={[0, 100]} tipFormatter={v => (`${v}°C`)} range={true} getAriaValueText={(value) => `${value}°C`}></Slider> <br/> <br/> <div>Included</div> <Slider marks={{ 20: '20°C', 40: '40°C' }} included={false} defaultValue={[0, 100]} range={true} tipFormatter={v => (`${v}°C`)} getAriaValueText={(value) => `${value}°C`}></Slider> </div> );

import React from 'react'; import { Slider } from '@douyinfe/semi-ui'; class SegSlider extends React.Component { constructor(props) { super(); this.state = { value: [20, 60] }; this.changeValue = this.changeValue.bind(this); this.getRailStyle = this.getRailStyle.bind(this); } changeValue(value) { this.setState({ value }); } getRailStyle(range) { // color of second segment inherits from .semi-slider-track const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)']; const gradientPos = this.state.value.map(val => ((val - range[0]) / (range[1] - range[0])).toFixed(2) * 100 ); const style = { background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)` }; return style; } render() { const range = [10, 100]; const railStyle = this.getRailStyle(range); return ( <Slider range min={range[0]} max={range[1]} onChange={this.changeValue} railStyle={railStyle} defaultValue={this.state.value} /> ); } }

import React from 'react'; import { Slider, Button } from '@douyinfe/semi-ui'; class ControllSlider extends React.Component { constructor(props) { super(); this.state = { value: 10 }; this.changeValue = this.changeValue.bind(this); } changeValue() { this.setState({ value: this.state.value + 10 }); } render() { return ( <div> <Button onClick={this.changeValue} style={{ marginRight: 20 }}>点击改变value值</Button> <br/> <br/> <Slider value={this.state.value}></Slider> </div> ); } }

import React from 'react'; import { Slider } from '@douyinfe/semi-ui'; () => ( <div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical></Slider> </div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical verticalReverse></Slider> </div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical range defaultValue={[20, 60]}></Slider> </div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider> </div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical range marks={{ 20: '20°C', 40: '40°C' }} step={10} defaultValue={[20, 60]}></Slider> </div> <div style={{ height: 300, marginLeft: 30, marginTop: 10, paddingRight: 30, display: 'inline-block' }}> <Slider vertical verticalReverse range marks={{ 20: '20°C', 40: '40°C' }} step={10} defaultValue={[20, 60]}></Slider> </div> </div> );

<div> <div> <div>Default</div> <Slider showBoundary={true} handleDot={{size:'4px',color:'blue'}}></Slider> </div> <br/> <br/> <div> <div>Range</div> <Slider defaultValue={[20, 60]} range handleDot={[{size:'4px',color:'blue'},{size:'4px',color:'pink'}]}></Slider> </div> </div>