semi-design/content/input/slider/index-en-US.md

---

localeCode: en-US order: 26 category: Input title: Slider subTitle: Slider icon: doc-slider

brief: Slider is used to help users quickly enter a numeric value or range.

Demos

How to import

import { Slider } from '@douyinfe/semi-ui';

Basic Usage

You can set range={true} to allow slider slide from both sides.

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>
)

With Input

Synchronize slider with input value.

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) {
      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} />
      </div>
    );
  }
}

Tooltip

You can use tipFormatter to format Tooltip content or set tipFormatter={null}to hide Tooltip.

import React from 'react';
import { Slider } from '@douyinfe/semi-ui';

() => (
  <div>
    <Slider tipFormatter={v => (`${v}%`)} />
    <br/>
    <br/>
    <Slider tipFormatter={null} />
  </div>
)

With Tag

Use marks to label measures on sliders.

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: '20c', 40: '40c' }} defaultValue={[0, 100]} range={true} ></Slider>
    <br/>
    <br/>
    <div>Inclued</div>
    <Slider marks={{ 20: '20c', 40: '40c' }} included={false} defaultValue={[0, 100]} range={true}></Slider>
  </div>
)

Segmented Background

To create a slider with segmented background, you could use css property linear-gradient for railStyle along with onChange to change background dynamically。

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}
        />
    );
  }
}

Controlled Component

You can use value along with onChange property if you want to use Slider as a controlled component.

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 }}>Click to change value</Button>
        <br/>
        <br/>
        <Slider value={this.state.value}></Slider>
      </div>
    );
  }
}

Vertical

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: '20c', 40: '40c' }} 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: '20c', 40: '40c' }} step={10} defaultValue={[20, 60]}></Slider>
      </div>
  </div>
)

API Reference

| Property | Instructions | type | Default | Version | | -------------- | ------------------------------------------------------------------------------------------ | ------------- | ------- |------ | | defaultValue | Default value | number | number[] | 0 |- | | disabled | Disable slider | boolean | false |- | | included | Takes effect when marks is 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] | Record | - |- | | max | Maximum value of the slider. | number | 100 |- | | min | Minimum value of the slider. | number | 0 |- | | railStyle | Style for slide rail | CSSProperties | - |0.31.0| | range | Toggle whether it is allow to move slider from both sides | boolean | false |- | | step | Increment between successive values | number | 1 |- | | tipFormatter | Format Tooltip content, by default display current value | (value: string | number | boolean | (string | number | boolean)[]) => any | v => v |- | | tooltipVisible | Toggle whether to display tooltip all the time | boolean | - |- | | value | Set current value, used in controlled component | number | number[] | |- | | vertical | Toggle whether to display slider vertically | boolean | false |- | | verticalReverse | Vertical but reverse direction >=1.29.0| boolean | false |-| | onAfterChange | Triggered when onmouseup is invoked, passed in current value as params | (value: number | number[]) => void | - |- | | onChange | Callback function when slider value changes | (value: number | number[]) => void | - |- |

Design Tokens