HIG Slider


1422441.3.08 months ago3 years agoMinified + gzip package size for @hig/slider in KB



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



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) => ({
    slider: {
      color: themeData["colorScheme.status.error"]
    markContainer: {
      opacity: 1
    markRules: {
      padding: `4px`
    discrete: {
      position: `static`

  return (
    <Slider stylesheet={customStylesheet} />

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.