A Slider component for Ember based on the native html5 range input.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
app Rename the component to `x-range-input` Jan 23, 2016
config Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
tests Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
typings/ember Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
vendor Initial Commit from Ember CLI v0.1.15 Feb 16, 2015
.editorconfig Updating x-slider to the latest and greatest Jan 22, 2016
.ember-cli Initial Commit from Ember CLI v0.1.15 Feb 16, 2015
.eslintignore Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
.eslintrc.js Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
.gitignore Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
.jshintrc Initial Commit from Ember CLI v0.1.15 Feb 16, 2015
.npmignore Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
.travis.yml Update node version for travis Jul 3, 2018
.watchmanconfig Updating x-slider to the latest and greatest Jan 22, 2016
CHANGELOG.md Update CHANGELOG Jul 3, 2018
CODE_OF_CONDUCT.md add a Code of Conduct via the Contributor Covenant Jan 7, 2016
LICENSE.md Updating x-slider to the latest and greatest Jan 22, 2016
README.md fix build badge (#18) Jan 25, 2017
ember-cli-build.js Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
index.js Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
jsconfig.json Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
package.json Released v1.0.3 Jul 3, 2018
testem.js Update to 3.1.4 dependencies and style (#24) Jul 2, 2018
yarn.lock Add ember-release package Jul 3, 2018

README.md

emberx-range-input

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

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

Installation

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.