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>