About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Slider

<terra-slider> | TerraSlider
Since ? 

<terra-slider label="Year" min="1920" max="2020" mode="range"></terra-slider>

Examples

Default Behavior (Selected Values Display)

By default, the slider displays the selected values in the top right corner of the component. This is the recommended HDS pattern. 

<terra-slider label="Year" min="1920" max="2020" mode="range"></terra-slider>

Single Value 

<terra-slider min="0" max="100" step="5" value="25" label="Temperature"></terra-slider>

Range

<terra-slider mode="range" min="0" max="1000" step="10" start-value="200" end-value="800" label="Range"></terra-slider>

With Tooltips

Use the has-tooltips prop to show tooltips on the slider handles instead of displaying values in the top right. When tooltips are enabled, they automatically merge when handles get close together (e.g., “23–24” instead of two overlapping tooltips). 

<terra-slider min="0" max="100" step="5" value="25" label="Temperature" has-tooltips></terra-slider>
<terra-slider mode="range" min="0" max="100" step="1" start-value="23" end-value="24" label="Close Range" has-tooltips></terra-slider>

With Label 

<terra-slider min="0" max="100" value="50" label="Temperature (°C)"></terra-slider>

Hidden Label (Accessible) 

<terra-slider min="0" max="100" value="50" label="Volume Control" hide-label></terra-slider>

With Input Fields 

<terra-slider min="0" max="1000" value="250" show-inputs></terra-slider>

Range with Default Values 

<terra-slider mode="range" min="0" max="1000" start-value="200" end-value="800" label="Range"></terra-slider>

Range with Input Fields 

<terra-slider mode="range" min="0" max="1000" start-value="200" end-value="800" label="Range" show-inputs></terra-slider>

Decimal Steps 

<terra-slider min="0" max="10" step="0.2" value="2.4" show-inputs></terra-slider>

Custom Step Size 

<terra-slider min="0" max="100" step="5" value="25" show-inputs></terra-slider>

Disabled 

<terra-slider min="0" max="10" value="4" disabled></terra-slider>

Display Modes

The slider supports two display modes for showing selected values:

Default (Selected Values in Header):

  • Selected values are displayed in the top right corner of the component
  • This is the recommended HDS pattern and provides a clean, unobtrusive display
  • Example: <terra-slider label="Year" min="1920" max="2020" mode="range"></terra-slider>

Tooltips:

  • Use the has-tooltips prop to show tooltips on the slider handles
  • Tooltips automatically merge when handles get close together (within 15% proximity)
  • Example: <terra-slider has-tooltips mode="range" min="0" max="100"></terra-slider>

Default Values

Single Mode:

  • If no value is provided, defaults to min value
  • Example: <terra-slider min="0" max="100"></terra-slider> starts at 0

Range Mode:

  • If no start-value is provided, defaults to min value
  • If no end-value is provided, defaults to max value
  • Example: <terra-slider mode="range" min="0" max="100"></terra-slider> starts at [0, 100]

Listen for changes 

<terra-slider id="s1" min="0" max="100" value="40"></terra-slider>
<script>
  const s1 = document.getElementById('s1');
  s1.addEventListener('terra-slider-change', (e) => {
    // Single mode: e.detail.value
    // Range mode: e.detail.startValue, e.detail.endValue
    console.log('slider change', e.detail);
  });
<\/script>

[component-metadata:terra-slider]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/slider/slider.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/slider/slider.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/slider/slider.js';

To import this component as a React component:

import TerraSlider from '@nasa-terra/components/dist/react/slider';

Properties

Name Description Reflects Type Default
mode The slider mode - either ‘single’ for one value or ‘range’ for selecting a range. SliderMode 'single'
min The minimum value of the slider. number 0
max The maximum value of the slider. number 100
step The step size for the slider. Use integers (1, 2, 5) for whole numbers or decimals (0.1, 0.2, 0.5) for fractional steps. number 1
disabled Disables the slider. boolean false
hasPips
has-pips 		Shows tick marks and labels on the slider. boolean false
hasTooltips
has-tooltips 		Shows tooltips on the slider handles. When false (default), selected values are shown in the top right instead. boolean false
showInputs
show-inputs 		Shows input fields below the slider for precise value entry. boolean false
value The current value for single mode sliders. number | undefined -
startValue
start-value 		The start value for range mode sliders. number | undefined -
endValue
end-value 		The end value for range mode sliders. number | undefined -
label The label text for the slider. string 'Slider'
hideLabel
hide-label 		Hide the slider’s label text. When hidden, still presents to screen readers. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.