Castle UI exports 5 components for RangeSlider:

• RangeSlider: The wrapper that provides context and functionality for all children.
• RangeSliderTrack: The empty part of the RangeSlider that shows the track.
• RangeSliderFilledTrack: The filled part of the RangeSlider.
• RangeSliderThumb: The handle that's used to change the RangeSlider value.

Usage

Import

import {
  RangeSlider,
  RangeSliderTrack,
  RangeSliderFilledTrack,
  RangeSliderThumb,
} from '@passfort/castle'
content_copy
Copy

The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price.

Example

Note: We recommend adding a aria-label or aria-labelledby prop to provide an accessible label for the RangeSlider.

<RangeSlider aria-label={['min', 'max']} defaultValue={[10, 30]}>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
<RangeSlider aria-label={['min', 'max']} defaultValue={[10, 30]}>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
content_copy
Copy
live example

Discrete RangeSliders

Discrete RangeSliders allow you to snap to predefined sets of values. This can be accomplished using the step prop.

<RangeSlider defaultValue={[120, 240]} min={0} max={300} step={30}>
  <RangeSliderTrack bg='red.100'>
    <RangeSliderFilledTrack bg='tomato' />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
<RangeSlider defaultValue={[120, 240]} min={0} max={300} step={30}>
  <RangeSliderTrack bg='red.100'>
    <RangeSliderFilledTrack bg='tomato' />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
content_copy
Copy
live example

Getting the final value when dragging the slider

Dragging the slider can trigger lots of updates and the user might only be interested in the final result after sliding is complete. You can use onChangeEnd for this.

<RangeSlider
  aria-label={['min', 'max']}
  onChangeEnd={(val) => console.log(val)}
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
<RangeSlider
  aria-label={['min', 'max']}
  onChangeEnd={(val) => console.log(val)}
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
content_copy
Copy
live example

Changing the RangeSlider orientation

<RangeSlider
  aria-label={['min', 'max']}
  colorScheme='pink'
  defaultValue={[10, 30]}
  orientation='vertical'
  minH='32'
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
<RangeSlider
  aria-label={['min', 'max']}
  colorScheme='pink'
  defaultValue={[10, 30]}
  orientation='vertical'
  minH='32'
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
content_copy
Copy
live example

Getting the final value when dragging the slider

Dragging the slider can trigger lots of updates and the user might only be interested in the final result after sliding is complete. You can use onChangeEnd for this.

<RangeSlider
  aria-label={['min', 'max']}
  onChangeEnd={(val) => console.log(val)}
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
<RangeSlider
  aria-label={['min', 'max']}
  onChangeEnd={(val) => console.log(val)}
>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
content_copy
Copy
live example