Let’s create numeric range input with attached scale

HTMLInputElement of type range allows a user accessible and eloquent way to choose a numeric value from the provided range. Modern browser APIs allow us certain level of customization for this element. Let's create a fun and simple temperature input.

Here is what we are going to achieve.

React Component

Our goal is to render <input type="range" /> with some additional tags added to it. Here is basic implementation.

import type { ChangeEvent } from 'react';

type Props = {
  /** Provide an optional label to the range input */
  label?: string;
  /** Set a default value. Can be value for controlled mode */
  defaultValue?: number;
  /** Set a minimum available value in the range */
  min?: number;
  /** Set a maximum available value in the range */
  max?: number;
  /** Set a step increment/decrement amount */
  step?: number;
  /**
   * Configure scale below range track
   * Warning! See below
   */
  scale?: { label: string; value: number }[];
  /** Callback to capture changes */
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  /** Disable the input */
  disabled?: boolean;
};

export const RangeInput: FC<Props> = ({
  max = 100,
  min = 0,
  step,
  defaultValue = 0,
  onChange,
  disabled
}) => {
  const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      onChange?.(event);
    },
    [onChange],
  );
  return (
    <input
      className={classes.input}
      type="range"
      value={value}
      min={min}
      max={max}
      step={step}
      onChange={handleChange}
      disabled={disabled}
      defaultValue={defaultValue}
    />
  );
};

Styling input

All modern browsers allow us to style range input. But we still have to use vendor prefixes. -webkit-slider-runnable-track and -webkit-slider-thumb for Blink/WebKit; -moz-range-track and -moz-range-thumb for Mozilla based browsers.

We are going to use CSS variables to store information about design we choose.

.input {
    --track-height: 4px;
    --slider-size: 18px;
    --track-color: plum;
    --track-color-active: mediumPurple;
    --thumb-color: seaGreen;
    --thumb-color-active: chartreuse;

    /* we need this to reset browser built-in styles */
    all: unset;
}

Here is how to style the track of the input.

.input::-moz-range-track {
    background: var(--track-color);
    height: var(--track-height);
    border-radius: 6px;
    cursor: col-resize;
}

.input::-webkit-slider-thumb {
    background: var(--track-color);
    height: var(--track-height);
    border-radius: 6px;
    cursor: col-resize;
}

We have to repeat two times because stacking selectors (.input::-moz-range-track, .input::-webkit-slider-thumb) doesn't work in this case.

Here are thumb styles:

.input::-moz-range-thumb {
    background-color: var(--thumb-color);
    border: none;
    cursor: grab;
    height: var(--slider-size);
    width: var(--slider-size);
}

.input::-webkit-slider-thumb {
   /* same styles as above and additional to fix Chrome/Safari issues */
   appearance: none;
   border-radius: 50%;
   margin-top: calc(var(--track-height) / 2 - var(--slider-size) / 2);
}

Now we need to style different input states.

/* Disable unwanted outline when focused */
.input:focus-visible {
    outline: none;
}

/* Disabled state */
.input:disabled::-moz-range-thumb {
    background-color: var(--disabled-color);
    cursor: not-allowed;
}

.input:disabled::-webkit-slider-thumb {
    /* same as above */
}

.input:disabled::-moz-range-track {
    background: var(--disabled-color);
    cursor: not-allowed;
}

.input:disabled::-webkit-slider-runnable-track {
    /* same as above */
}

/* Hover state */
.input:hover::-moz-range-track {
    background: var(--track-color-active);
}

.input:hover::-webkit-slider-runnable-track {
    /* same as above */
}


/* Active state */
.input:active:not(:disabled)::-moz-range-thumb {
    cursor: grabbing;
}

.input:active:not(:disabled)::-webkit-slider-thumb {
     /* same as above */
}

.input:active:not(:disabled):focus::-moz-range-thumb{
    background-color: var(--thumb-color-active);
}

.input:active:not(:disabled):focus::-webkit-slider-thumb {
    /* same as above */
}

.input:active:not(:disabled):focus::-moz-range-track {
    background: var(--track-color-active);
}

.input:active:not(:disabled):focus::-webkit-slider-runnable-track {
    /* same as above */
}

Selectors explained

.input:active:not(:disabled):focus::-moz-range-thumb consists of:

• .input - CSS class name.

• :active - CSS pseudo-class matching elements being interacted with.

• :not(:disabled) - CSS pseudo-class which represents elements that do not match provided list of selectors. Not disabled in this case.

• :focus - CSS pseudo-class matching element having browser focus.

• ::-moz-range-thumb - CSS pseudo-element matching draggable thumb for Mozilla browsers.

Add input label and output

Now we are going to implement accessible clickable label and dynamic output element to show current value.

export const RangeInput: FC<Props> = ({
  label,
  max = 100,
  min = 0,
  step,
  defaultValue = 0,
  onChange,
  disabled,
}) => {
  // Create unique id
  const id = useId();
  /* The state is required to be able to display an input result */
  const [value, setValue] = useState(defaultValue);
  const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setValue(event.target.valueAsNumber);
      onChange?.(event);
    },
    [onChange],
  );
  return (
    <div className={classes.wrapper}>
      {/* Conditionally render label element */}
      {label && (
        {/* We use input id to connect the label */}
        <label htmlFor={id} className={classes.label}>
          {label}
        </label>
      )}

      <input
          type="range"
          id={id}
          value={value}
          min={min}
          max={max}
          step={step}
          onChange={handleChange}
          disabled={disabled}
      />

      {/* We use input id to connect the output */}
      <output name="result" htmlFor={id}>
        {value}
      </output>
    </div>
  );
};

Add scale

Warning: This feature is not supported by Safari browser!

Mozilla and Chromium-based browsers allow us to attach scale with tick marks into a range control with the help of <datalist> element. Each tick mark is represented by an <option>, where the value attribute corresponds to the specific range value at which the mark should appear.

type ScaleMark = {
  /** Range value to attach mark to */
  value: number;
  /** Label to display at the provided mark */
  label: string;
};

export type Props = {
  //...
  /** Provide an optional array of scale marks to display below range track */
  scale?: ScaleMark[];
};

export const RangeInput: FC<Props> = ({
  //...
  scale,
}) => {
  const id = useId();
  // Derivative id for scale element
  const scaleId = `${id}-scale`;
  // ...
  return (
    <div className={classes.wrapper}>
      {/*...*/}
      <div className={classes.inputWrapper}>
        <input
          //...
          // Here we provide scale element id
          list={scale && scaleId}
        />
        {/* Conditionally render scale element*/}
        {scale && (
          <datalist id={scaleId}>
            {scale.map(({ label, value }) => (
              <option key={value} value={value} label={label} />
            ))}
          </datalist>
        )}
      </div>

      {/*...*/}
    </div>
  );
};

Here are styles for scale:

.scale {
    display: flex;
    flex-direction: row;
    /* Required to distribute marks */
    justify-content: space-between;
    width: 100%;
}

.scale option {
    padding: 6px 0 0 0;
    font-size: 16px;
    user-select: none;
    cursor: default;
}

Working demo

Here is working example of range input.

Happy coding!