ember-aria-multi-thumb-slider
An ember addon for a two thumb slider to pick a value range.
Last updated 6 months ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-aria-multi-thumb-slider 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.8                                ...           latest (6 months ago)

16 Versions

  • 1.0.8                                ...           6 months ago
  • 1.0.7                                ...           8 months ago
  • 1.0.6                                ...           8 months ago
  • 1.0.5                                ...           8 months ago
  • 1.0.4                                ...           8 months ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           2 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |