An ember addon for a two thumb slider to pick a value range
MIT License
A two-thumb slider is a slider with two thumbs that each set a value in a group of related values, for example selecting a price range for a product or service.
This component is totally based on the WAI-ARIA Authoring Practices for accessible components. Slider (Multi-thumb)
ember install ember-aria-multi-thumb-slider
Setup slider icons:
Add your icons for the left and right sliders to the following directory and name them as max-arrow.png
and min-arrow.png
.
cd <ember-app-root-dir>/public/images
Example Markup:
{{aria-multi-thumb-slider
title="Select a hotel between $0 and $500"
label="Hotel Price"
minValue=0
maxValue=500
currentMin=50
currentMax=200
units="$"
}}
For custom thumb sliders:
{{aria-multi-thumb-slider
title="Select a flight between $0 and $1000"
label="Flight Price"
minValue=0
maxValue=100
currentMin=5
currentMax=50
minThumb="images/min-color-arrow.png"
maxThumb="images/max-color-arrow.png"
}}
Tool-tip text for the slider
ARIA label text for the thumbs.
Minimum value for the range
Maximum value for the range
Current minimum value for the range
Current maximum value for the range
The dimension for the value of slider
The image url for the minimum value thumb of the slider
The image url for the maximum value thumb of the slider
The flag which tells whether we need to prefix or suffix the units to the value
Default: true
ember serve
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.