A Slider component for Ember based on the native html5 range input.
JavaScript HTML
Latest commit 1e93a18 Jan 26, 2017 @cowboyd cowboyd committed with Robdel12 fix build badge (#18)
The build badge was pointing not at master, but at the generic travis build 
which falsely indicated that it was failing. If you don't specify a branch in the 
badge, then it will point at the latest build which could be some rando branch.



Build Status Ember Observer Score npm version Ember Badge

A Slider component based on the native html5 range input.

The component itself takes on a number value between two bounds, that proceeds in discrete step values. So, for example, to indicate a percentage of saturation in an image, where the smallest change in saturation is 1%, you might specify your slider control like:

{{x-range-input min=0 max=100 step=1 value=saturationPercentage action=(action "updateSaturation")}}

In this example we would need to implement an updateSaturation action that sets the value of saturationPercentage. That might look something like this:

actions: {
  updateSaturation(value) {
    this.set('saturationPercentage', value);

The action sends two arguments with it. The first is the value and the second is the component itself as an optional argument.

Default Values

While min, max, and step can take on any numeric values, the default use-case is optimized for representing percentages stepped by 1%. There fore the proceeding example could have been written simply as:

{{x-range-input value=saturationPercentage action=(action "updateSaturation")}}

Classic "binding style" with the mut helper

{{x-range-input value=(mut saturationPercentage)}}


emberx-range-input is part of the "missing components of ember" collectively known as emberx:


ember install emberx-range-input

Running Tests

  • ember test
  • ember test --server

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms, which can be found in the CODE_OF_CONDUCT.md file in this repository.