Slider

Demo

0%100%

0%100%

Code

import { SliderMarks } from 'antd/es/slider'
import Slider from '.'

export default function SliderDemo() {
  const forceMarks: SliderMarks = {
    0: {
      style: {
        marginTop: '5px',
        marginLeft: '15px',
      },
      label: <>0%</>,
    },
    30: '',
    60: '',
    100: {
      style: {
        marginTop: '5px',
        marginLeft: '-20px',
      },
      label: <>100%</>,
    },
  }
  return (
    <div className="demo-container">
      <div className="demo-row">
        <Slider
          style={{ width: 300 }}
          min={0}
          max={100}
          defaultValue={30}
          disabled
          marks={forceMarks}
        />
      </div>
      <div className="demo-row">
        <Slider
          style={{ width: 300 }}
          marks={forceMarks}
          min={0}
          max={100}
          defaultValue={30}
        />
      </div>
      <div className="demo-row">
        <Slider style={{ width: 300 }} min={0} max={100} defaultValue={30} />
      </div>
      <div className="demo-row">
        <Slider style={{ width: 300 }} min={0} max={100} defaultValue={30} />
      </div>
    </div>
  )
}