Skip to main content
Kaleidoscope

Slider

AK
YF

Useful for easily changing inputs that require a sliding numerical scale

Default

By default all you need to pass is a label, value, and onChange handler:

Editable example
() => {
  const [value, setValue] = React.useState(0);

  return (
    <Stack gap="xs">
      <Slider
        label="How much money do you want?"
        value={value}
        onChange={setValue}
      />
      <Text size="s">The current value is {value}</Text>
    </Stack>
  );
}

Theming

Sliders are also usable with a dark background when used in a dark themed context.

Editable example
() => {
  const [value, setValue] = React.useState(0);

  return (
    <Stack
      padding="l"
      className={darkTheme}
      style={{
        background: tokens.color.background,
        borderRadius: tokens.borderRadius.surface,
      }}
    >
      <Slider
        label="How dark is it?"
        value={value}
        onChange={setValue}
      />
    </Stack>
  );
}

Min and max values

By default, the minimum is set at 0 and maximum is set at 100. You can also set custom minimum and maximum range values.

Editable example
() => {
  const [value, setValue] = React.useState(5);

  return (
    <Slider
      label="Give me a number between 1 and 10"
      value={value}
      onChange={setValue}
      min={1}
      max={10}
    />
  );
}

Step

Step by a custom amount along the slider. By default the step is set to 1.

Editable example
() => {
  const [value, setValue] = React.useState(10);

  return (
    <Slider
      label="Steps of 10"
      value={value}
      onChange={setValue}
      step={10}
    />
  );
}

Unit

You can provide a unit prop; for example when using the Slider to set font size:

Editable example
() => {
  const [value, setValue] = React.useState(0);

  return (
    <Slider
      label="Font size"
      value={value}
      onChange={setValue}
      unit="px"
    />
  );
}

Label hidden

The label and number input can be hidden with the labelHidden prop. The current value wil instead show on hover.

Editable example
() => {
  const [value, setValue] = React.useState(0);

  return (
    <Slider
      labelHidden
      label="Opacity"
      unit="%"
      value={value}
      onChange={setValue}
    />
  );
}

Value hidden

To never show the output value, either with the label shown or hidden, use the valueHidden prop.

Editable example
() => {
  const [value1, setValue1] = React.useState(0);
  const [value2, setValue2] = React.useState(0);

  return (
    <Stack gap="l">
      <Slider
        valueHidden
        label="Label with no value shown"
        value={value1}
        onChange={setValue1}
      />
      <Slider
        valueHidden
        labelHidden
        label="No label or value shown"
        value={value2}
        onChange={setValue2}
      />
    </Stack>
  );
}

Best practices

  1. Use Sliders for options that benefit from gestural control over a numeric value, such as opacity. For values that require more precision, use a .
  2. Choose a short and descriptive label that describes the value being changed.
  3. If the number value represents a unit of something, always provide a unit label.
  4. Avoid using a Slider for ranges that are extremely large (e.g. 1—1000) or very small (e.g. 1—5).

Accessibility

This component makes use of native HTML form elements, which ensures usability from the keyboard and with screen readers. Always provide a label for screen readers to explain the purpose of the slider.