Skip to main content

Range Slider

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/range-slider"></script>

NPM#

npm i @pearson-ux/range-slider --save

Demo#

Standard#

<pearson-range-slider min="0" max="5" step="any" toptext="Top Text"></pearson-range-slider>

With input#

<pearson-range-slider min="0" max="5" step="any" toptext="Top Text"></pearson-range-slider>

Structure#

To add a range slider, just add the markup in your app where you want it displayed.

API#

Required#

All these attributes are required.

AttributeTypeDefaultDescription
minStringunsetSet the minimum number of the slider.
maxStringunsetSet the maximum number of the slider
stepStringunsetThe stepping interval

Optional#

All these attributes are optional.

AttributeTypeDefaultDescription
toptextStringunsetText that is centered above the slider
righttextStringunsetText that is to the right of the slider
inputBoolFalseSetting to true, adds an optional input box to control the slider
bottomtextStringunsetText that is below the input

Events#

The pearson-range-slider component emits one event:

EventDescription
changeWill fire when the range-slider drags across the bar or when an input value is entered.
const slider = document.querySelector('pearson-range-slider');
slider.addEventListener('change', () => {
// Do something when the value changes
});

HTML Markup#

Do you want to use your own JS to make the range slider function? No problem, use the markup below along with CSS to build a range slider with your own JS.

Here are some basic practices to make sure the range slider you build is accessible.

Standard Markup#

<div class="range-container">
<div class="slider">
<label id=labelOne class="gr-label" for="sliderId">Range Slider</label>
<input aria-describedby="labelOne labelTwo" type="range" name="slider" id="sliderId" min="0" max="15" step=".25"/>
<div class="range-color" style="width:0;"></div>
<div class="tick-marks"></div>
</div>
<span id=labelTwo class="gr-meta">lb</span>
</div>

With Input Markup#

<div class="range-input-container">
<div class="groups">
<div class="input-group">
<div class="gr-form-element">
<label id="rangeInputOne" class="gr-label" for="inputId">Range Slider</label>
<input aria-describedby="rangeInputOne rangeInputTwo rangeInputThree" class="gr-input" id="inputId" type="text" value="" />
</div>
<span id="rangeInputTwo" class="gr-meta">lb</span>
</div>
<span id="rangeInputThree" class="gr-meta">max 2lbs</span>
</div>
<div class="range-container">
<div class="slider">
<label id=labelThree class="gr-label" for="sliderIdTwo">Range Slider</label>
<input aria-describedby="labelFour" type="range" name="slider" id="sliderIdTwo" min="0" max="15" step=".25"/>
<div class="range-color" style="width:0;"></div>
<div class="tick-marks"></div>
</div>
<span id=labelFour class="gr-meta">lb</span>
</div>
</div>