Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Slider

May require JavaScript

Overview

Choose an approximate number from a range.

Preview

View Kitchen Sink

At its root the Slider component is a native <input> form element with an attribute type of range.

<input class="fsa-slider" id="lorem-range-2229" name="lorem-range-2229" type="range" min="0" max="100" value="30" step="10">

Variants

Fill

<input class="fsa-slider fsa-slider--fill" id="lorem-range-4453" name="lorem-range-4453" type="range" min="0" max="100" value="90" step="10">

Disabled

<input class="fsa-slider" id="lorem-range-3309" name="lorem-range-3309" type="range" min="0" max="100" value="40" step="10" disabled="">

Vertical

<div class="fsa-slider-vertical">
  <input class="fsa-slider" id="lorem-range-2229" name="lorem-range-2229" type="range" min="0" max="100" value="30" step="10">
</div>

Vertical, Custom Height

<div class="fsa-slider-vertical" style="--slider-vertical-height: 10rem">
  <input class="fsa-slider" id="lorem-range-2229" name="lorem-range-2229" type="range" min="0" max="100" value="60" step="10">
</div>

Examples

With output

Combine with Level layout component to arrange Slider with an <output> element (note JavaScript guidance).

90 
<div class="fsa-level">
  <span>
    <input class="fsa-slider fsa-slider--fill" id="lorem-range-4672" name="lorem-range-4672" type="range" min="0" max="100" value="90" step="10">
  </span>
  <span><output aria-live="polite" id="lorem-range-ouput-6789" name="lorem-range-ouput-6789" for="lorem-range-4672">90</output></span>
</div>

With output, Fill

Combine the fsa-slider--fill variant with Level to arrange Slider with an <output> element (note JavaScript guidance).

10 
<div class="fsa-level">
  <span class="fsa-level__item--grow-auto">
    <input class="fsa-slider fsa-slider--fill" id="lorem-range-4672" name="lorem-range-4672" type="range" min="0" max="100" value="10" step="10">
  </span>
  <span><output aria-live="polite" id="lorem-range-ouput-6789" name="lorem-range-ouput-6789" for="lorem-range-4672">10</output></span>
</div>

Within Field component

Nested within a Form Field.

90 
<div class="fsa-field">
  <label class="fsa-field__label" for="lorem-range-1234">Label <span class="fsa-field__label-desc">Required</span></label>
  <input class="fsa-slider fsa-field__item" id="lorem-range-1234" name="lorem-range-1234" type="range" min="0" max="10" value="3" step="1">
</div>
<div class="fsa-field">
  <label class="fsa-field__label" for="lorem-range-7710">Label <span class="fsa-field__label-desc">Required</span></label>
  <div class="fsa-level">
    <span class="fsa-level__item--grow-auto">
      <input class="fsa-slider fsa-field__item" id="lorem-range-7710" name="lorem-range-7710" type="range" min="0" max="10" value="3" step="1">
    </span>
    <span><output aria-live="polite" id="lorem-range-ouput-7710" name="lorem-range-ouput-7710" for="lorem-range-7710">90</output></span>
  </div>
</div>

Usage

Use

  • When the range is more important than precision.
    • For instance, it could be more important for a target price selector to communicate where the target price falls within a certain range than the precise dollar amount selected.
  • When a relative value is more important than an exact value.
    • For instance, a volume slider is typically more focussed on the relative loudness of the output rather than the specific decibel level.

Don’t Use

  • When the accuracy of the numeric value entered is important. Consider using number input instead.
  • If a precise number should be entered, consider a regular Text Input or Spinbox.
  • For ranges that are extremely large i.e. 1-1000.
  • For ranges that are too small i.e. 1-3.
UI Component
Form Fields
Data entry from a variety of structured form controls.

General Guidance

  • Accepted attributes to describe the Slider input[type=range]:
    • value: Current value.
    • min: Minimum value.
    • max: Maximum value.
    • step: The granularity the value may be increased or decreased.
  • Label the limits of the range.
    • When appropriate, label the ends of the slider with the limits of the range (for example: “0/100”, “small/large” or “less expensive/more expensive”).
  • Don’t be too granular. In a range slider, the relative value is more important than the specific value, so set the step attribute so it’s not too granular.
    • By setting the step attribute to a value of 10-20% of the total range you prevent unnecessary precision and cognitive strain in your users.
    • For example, set step="10" in a total range of 100.

JavaScript Guidance

Some example implementations of this component can pair with an <output> element to surface its approximate value to the user, however JavaScript would be required. Below is an example script to reflect the Slider’s dynamic updated value:

30

Disclaimer

All JavaScript included in the Design System's CSS Framework, fsa-style, are not approved for Production use. Their role is purely for demonstration purposes only, providing development teams with the inspiration, reference, and guidance to fully implement a component's UI behavior.

Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e. DOM Scripting). Two frequent examples:

  • Adding and/or removing a class, e.g. addClass('component-name--active')
  • Adding and/or removing an attribute, e.g. setAttribute('aria-expanded', 'false')
Return to top