An ember addon for a two thumb slider to pick a value range
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js
yuidoc.json

README.md

ember-aria-multi-thumb-slider

Build Status Coverage Status npm npm version dependencies Status devDependencies Status EmberObserver

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)

Demo

Demo

Installation

  • ember install ember-aria-multi-thumb-slider

Pre-usage setup

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

Usage

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"
    }}

Properties

title [STRING]

Tool-tip text for the slider

label [STRING]

ARIA label text for the thumbs.

minValue [NUMBER]

Minimum value for the range

maxValue [NUMBER]

Maximum value for the range

currentMin [NUMBER]

Current minimum value for the range

currentMax [NUMBER]

Current maximum value for the range

units [STRING]

The dimension for the value of slider

minThumb [STRING]

The image url for the minimum value thumb of the slider

maxThumb [STRING]

The image url for the maximum value thumb of the slider

unitPrefix [BOOLEAN]

The flag which tells whether we need to prefix or suffix the units to the value

Default: true

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.