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.

Attribute	Type	Default	Description
min	String	unset	Set the minimum number of the slider.
max	String	unset	Set the maximum number of the slider
step	String	unset	The stepping interval

Optional

All these attributes are optional.

Attribute	Type	Default	Description
toptext	String	unset	Text that is centered above the slider
righttext	String	unset	Text that is to the right of the slider
input	Bool	False	Setting to true, adds an optional input box to control the slider
bottomtext	String	unset	Text that is below the input

Events

The pearson-range-slider component emits one event:

Event	Description
change	Will 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>