Ember Range Slider

Provides a horizontal slider component with two handles that allows for visually selecting a range from within a specified min and max.

Supported interactions include pressing (or touching) and dragging either handle, as well as tapping on the slider track to adjust the nearest slider handle to the new location.

The component follows a data down / actions up approach and uses hammer.js to handle the touch and mouse interactions.

Live Demo

View a live demo here: http://collectrium.github.io/ember-range-slider/

Example

{{ember-range-slider
  min=rangeMin
  max=rangeMax
  start=start
  end=end
  rangeChanging=(action 'rangeSliderChanging')
  rangeChanged=(action 'rangeChanged')
  roundingHandler=(action 'roundingNearestInteger')
  isSlidingChanged=(action (mut isSliding))
}}

Using

import EmberRangeSlider from '@upsilon/ember-range-slider/components/ember-range-slider';

Data down

min and max are numeric values that define the values associated with the left and right edge of the slider.

start and end are numeric values assigned to the left and right handle.

Actions Up

The rangeChanging action is fired with start and end values continuously as the user slides a handle along the range.

The rangeChanged action is fired with start and end values when a range change is "committed", i.e. when the user releases the slider handle.

The isSlidingChanged action is fired with true as the user begins sliding a handle and again with false when the user releases the handle.

The roundingHandler action is executed with a start and end value, continuously enclosing it in a rounding function and returning a new value as the user moves the handle over the range.

Development Setup

Installation

• git clone this repository
• yarn install
• bower install

Running Tests

• ember try:each
• ember test
• ember test --server

Running the dummy app

• ember server
• Visit your app at http://localhost:4200.

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

Credits

This addon was extracted from a prototype project at Collectrium. Contributions from @lukemelia, @chrislopresto and @leahdungo.