Vistaprint
styleKeysrange

Range

A range input lets users pick a numeric value along a track using a handle.

Share
Share
jsx
<input type="range" class="stylized-range" min="1" max="100" value="30" />

Managing State in React

As is the case with most form elements, folks often want to "control" this component. Controlling a component means that you take ownership over its state rather than letting the browser manage the state for you. When you control component, you own the source of truth for the UI. This means that you don't need to query the DOM in order to determine the current value of the element. So, when it comes time to use the value of the element somewhere else (e.g. submitting the selection to a back-end service), you can trust your stored value.

If you'd like to control this component, you'll need store the currently-selected value somewhere (e.g. React state or a Redux store), and you'll need to provide a handler to update that value when the user interacts with the component.

e.g.

jsx
() => {
  const [value, setValue] = React.useState(10)
  return (
    <>
      <Range
        value={value}
        onChange={event => setValue(event.target.value)}
        min={0}
        max={100}
      />
      <div>{value}</div>
    </>
  )
}

Components

Range

Range has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <input/>)

Guidelines

Designer Guidelines

  • Use value labels and tick marks when users need to know exact numeric settings.

  • When modifying a Range using themes, while you can adjust the track's border width and color, be aware that the browsers interpret the border width differently. Some browsers draw the border inside the track (thus making the rest of the track shorter as the border gets thicker), some draw it outside the track, and some don't draw it at all.

  • Edge does not support changes to Range via themes. These browsers will always get the default Vistaprint brand look for this component.

Developer Guidelines

  • Our Range component puts Vistaprint styling on top of the native range input, so you can use any of that HTML's element's properties, such as min ,max, and step.

  • When modifying a Range using themes, be aware that you can't adjust the overall margin or padding of the component, because the browsers are remarkably inconsistent about which parts of the range input they allow CSS to change. You can, however, adjust the total height of the component using --visage-range-height, and if you make this number taller than the height of the thumb, you will get extra whitespace around the thumb and track.