Slider

This component allows users to make selection from a range of values

Basic Usage


import { Slider } from '@krakentech/coral';
 
<Slider />

Properties

value


const [sliderValue, setSliderValue] = useState(10);
 
<Slider value={sliderValue} />
 
<Button
    color="secondary"
    size="small"
    onClick={() => setSliderValue(40)}
>
    Change slider value
</Button>

defaultValue


<Slider defaultValue={50} />

disabled


<Slider disabled />

error / errorMessage


<Slider error errorMessage="Please select a value" />

Please select a value

isAnimated


<Slider isAnimated={false} />

label


<Slider label="Select a value" />

Select a value

min / max


<Slider min={1} max={1000} />

optional

Note: You must pass a label and have showLabels set to true to see the optional indicator


<Slider label="Select a value" optional />

Select a value (optional)

showLabels


<Slider label="Select a value" showLabels={false} />

step


<Slider step={10} />

valueLabelDisplay


<Slider valueLabelDisplay="on" />

valueLabelFormat


<Slider
    min={0}
    max={100}
    valueLabelFormat={(value) => `${value}%`}
    valueLabelDisplay="on"
/>

Event Handling


<Slider onChange={(sliderValue) => {}} onBlur={() => {}} />

Full API

Name	Type	Default
`ariaLabel`	`string` The aria-label of the slider thumb.	`Slider control`
`value`	`number` `value` should be supplied by the parent component to control the value of the Slider component.
`defaultValue`	`number` The default value to be selected when the component is first rendered.
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`error`	`boolean` If `true`, the component will have error styling set.
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.
`getAriaValueText`	`(value: number) => string` Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
`isAnimated`	`boolean` If `true`, the slider will animate its value changes.	`true`
`label`	`string` The accessible label for the slider.
`max`	`number` The maximum allowed value of the slider. This should not be equal to min.	`100`
`min`	`number` The minimum allowed value of the slider. This should not be equal to max.	`0`
`name`	`string` Name attribute of the hidden `input` element.
`onBlur`	`FocusEventHandler<HTMLDivElement>` Callback fired when the slider loses user focus.
`onChange`	`SliderChangeHandler` Callback fired each time the user changes the slider value. `newValue` The new value of the slider. `event` The event source of the callback.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`showLabels`	`boolean` Display the field label, including the currently-selected value.	`true`
`step`	`number` The granularity with which the slider can step through values. (A “discrete” slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.	`1`
`valueLabelDisplay`	`SliderValueLabelDisplay` Controls when the value label is displayed: `auto` the value label will display when the thumb is hovered or focused. `on` will display persistently. `off` will never display.	`auto`
`valueLabelFormat`	`(value: number) => string` A function that formats the value label. This is useful for displaying currency, percentages, etc.

Design

Good to know

Choose a slider if you want to make a selection from a range of values, the perk of a slider is the change in value is reflected immediately to the user.

Component breakdown

Button slider: Soho Lights
Button label: Dusty Sky
Button label: Heading 6
Slider: Ink