Slider

A slider allows selecting a single numeric value from a range using a small sliding selector.

Read more about when and how to use the Slider component on the website.

Getting started

Install the package

yarn add @hig/slider @hig/theme-context @hig/theme-data

Import the component

import Slider from '@hig/slider';

Basic usage

<Slider
  min={21}
  max={99}
  step={1}
/>

Styling

Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Slider also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

import Slider from '@hig/slider';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    slider: {
      ...styles.slider,
      color: themeData["colorScheme.status.error"]
    },
    markContainer: {
      ...styles.markContainer,
      opacity: 1
    },
    markRules: {
      ...styles.markRules,
      padding: `4px`
    },
    discrete: {
      ...styles.discrete,
      position: `static`
    }
  });

  return (
    <Slider stylesheet={customStylesheet} />
  );
}