Slider

Sliders allow users to make selections from a range of values.

Slider is based on rc-slider.

Basic Usage

use marks prop to show marks under the slider.

0°C26°C37°C100°C


import Springen from 'springen';

const [value, setValue] = useState<number | undefined>(50);
<Springen.Slider
  value={value}
  onChange={setValue}
  marks={{
    0: '0°C',
    26: '26°C',
    37: '37°C',
    100: {
      style: {
        color: '#f50',
      },
      label: <strong>100°C</strong>,
    },
  }}
/>

Range

use range prop to enable range selection.

When two tooltips are overlapped, the combined tooltip will be shown.

18岁

22岁

18 - 22岁


import Springen from 'springen';

const [value, setValue] = useState<[number, number]>([18, 35]);

<Springen.Slider
  range
  unit="岁"
  className="flex-1"
  value={value}
  onChange={setValue}
  min={18}
  max={100}
/>