Range Slider
#
InstallationFor 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>
#
NPMnpm 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>
#
StructureTo add a range slider, just add the markup in your app where you want it displayed.
#
API#
RequiredAll 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 |
#
OptionalAll 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 |
#
EventsThe 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 MarkupDo 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.
#
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>