{"id":15161408,"url":"https://github.com/thefrontside/emberx-range-input","last_synced_at":"2025-10-24T20:32:12.110Z","repository":{"id":57224555,"uuid":"50461994","full_name":"thefrontside/emberx-range-input","owner":"thefrontside","description":"A Slider component for Ember based on the native html5 range input.","archived":false,"fork":false,"pushed_at":"2018-07-03T01:24:09.000Z","size":413,"stargazers_count":5,"open_issues_count":3,"forks_count":3,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-02-06T20:39:41.004Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://thefrontside.github.io/emberx-range-input/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thefrontside.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-26T21:52:54.000Z","updated_at":"2018-07-03T01:24:11.000Z","dependencies_parsed_at":"2022-09-04T07:41:26.336Z","dependency_job_id":null,"html_url":"https://github.com/thefrontside/emberx-range-input","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-range-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-range-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-range-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefrontside%2Femberx-range-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thefrontside","download_url":"https://codeload.github.com/thefrontside/emberx-range-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238035385,"owners_count":19405682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-27T00:05:51.902Z","updated_at":"2025-10-24T20:32:11.518Z","avatar_url":"https://github.com/thefrontside.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# emberx-range-input\n\n[![Build Status](https://travis-ci.org/thefrontside/emberx-range-input.svg?branch=master)](https://travis-ci.org/thefrontside/emberx-range-input)\n[![Ember Observer Score](http://emberobserver.com/badges/emberx-range-input.svg)](http://emberobserver.com/addons/emberx-range-input)\n[![npm version](https://badge.fury.io/js/emberx-range-input.svg)](https://badge.fury.io/js/emberx-range-input)\n[![Ember Badge](https://embadge.io/b/2.svg)](https://embadge.io/badges/2)\n\nA Slider component based on the native html5 range input.\n\nThe component itself takes on a number value between two bounds, that\nproceeds in discrete step values. So, for example, to indicate a\npercentage of saturation in an image, where the smallest change in\nsaturation is 1%, you might specify your slider control like:\n\n```handlebars\n{{x-range-input min=0 max=100 step=1 value=saturationPercentage action=(action \"updateSaturation\")}}\n```\n\nIn this example we would need to implement an `updateSaturation` action that\nsets the value of `saturationPercentage`. That might look something like this:\n\n\n```js\nactions: {\n  updateSaturation(value) {\n    this.set('saturationPercentage', value);\n  }\n}\n```\nThe `action` sends two arguments with it. The first is the value and the\nsecond is the component itself as an optional argument.\n\n\n### Default Values\n\nWhile `min`, `max`, and `step` can take on any numeric values, the\ndefault use-case is optimized for representing percentages stepped by\n1%. There fore the proceeding example could have been written simply\nas:\n\n```handlebars\n{{x-range-input value=saturationPercentage action=(action \"updateSaturation\")}}\n```\n\n### Classic \"binding style\" with the `mut` helper\n\n```handlebars\n{{x-range-input value=(mut saturationPercentage)}}\n```\n\n## EmberX\n\nemberx-range-input is part of the \"missing components of ember\" collectively\nknown as emberx:\n\n* [emberx-select](https://github.com/thefrontside/emberx-select)\n* [emberx-file-input](https://github.com/thefrontside/emberx-file-input)\n\n## Installation\n\nember install emberx-range-input\n\n## Running Tests\n\n* `ember test`\n* `ember test --server`\n\n\n## Code of Conduct\nPlease note that this project is released with a Contributor Code of\nConduct. By participating in this project you agree to abide by its\nterms, which can be found in the `CODE_OF_CONDUCT.md` file in this\nrepository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefrontside%2Femberx-range-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthefrontside%2Femberx-range-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefrontside%2Femberx-range-input/lists"}