The Slider is used to allow users to make selections from a range of values.

Castle UI exports 5 components for Slider:

• Slider: The wrapper that provides context and functionality for all children.
• SliderTrack: The empty part of the slider that shows the track.
• SliderFilledTrack: The filled part of the slider.
• SliderThumb: The handle that's used to change the slider value.
• SliderMark: The label or mark that shows names for specific slider value

Usage

Import

import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  SliderMark,
} from '@passfort/castle'
content_copy
Copy

Example

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

<Slider aria-label="slider-ex-1" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
<Slider aria-label="slider-ex-1" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
content_copy
Copy
live example

Discrete Sliders

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

<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
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.

<Slider aria-label="slider-ex-5" onChangeEnd={(val) => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
<Slider aria-label="slider-ex-5" onChangeEnd={(val) => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
content_copy
Copy
live example

Changing the slider orientation

<Slider
  aria-label="slider-ex-3"
  defaultValue={30}
  orientation="vertical"
  minH="32"
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
<Slider
  aria-label="slider-ex-3"
  defaultValue={30}
  orientation="vertical"
  minH="32"
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
content_copy
Copy
live example