Slider component supports range select

[hohoaisan]

Description

Please add support for ranged-slider for selecting between two values

Problem Statement

Currently Slider component only support one-sided and only one value per Slider, there're use cases that needs ranged slider like selecting between prices range, amount range,.. but it doesn't support.

Proposed Solution or API

Add option isRange: boolean to Slider component and accepts defaultValue/value as an array

const Example = () => {
  return
    <Box alignItems="center" w="100%">
      <Slider isRanged={true} w="3/4" maxW="300" low={0} high={70} minValue={0} maxValue={100} accessibilityLabel="hello world" step={10}>
        <Slider.Thumb />
        <Slider.Track>
          <Slider.FilledTrack />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
    </Box>;
};

Alternatives

No response

Additional Information

No response

[Viraj-10]

Hi @hohoaisan, Can you provide a wireframe for this feature?

[roshangm]

@Viraj-10 It would probably look like this: https://mui.com/material-ui/react-slider/#range-slider