ember-aria-multi-thumb-slider

An ember addon for a two thumb slider to pick a value range.

Usage no npm install needed!

<script type="module">
  import emberAriaMultiThumbSlider from 'https://cdn.skypack.dev/ember-aria-multi-thumb-slider';
</script>

README

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="quot;
}}

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/.