{"id":26920343,"url":"https://github.com/rvenkatesh/ember-slider","last_synced_at":"2025-10-13T02:22:52.028Z","repository":{"id":33118369,"uuid":"141613911","full_name":"RVenkatesh/Ember-Slider","owner":"RVenkatesh","description":"Slider (and likert scale) addon for ember apps","archived":false,"fork":false,"pushed_at":"2024-10-13T02:51:28.000Z","size":4701,"stargazers_count":11,"open_issues_count":16,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T22:35:23.865Z","etag":null,"topics":["ember","ember-addon","javascript","likert","likert-scale-survey","range","slider","slider-component","slider-plugin","sliders"],"latest_commit_sha":null,"homepage":"https://rvenkatesh.github.io/Ember-Slider/","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/RVenkatesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-19T17:55:56.000Z","updated_at":"2024-11-12T16:28:34.000Z","dependencies_parsed_at":"2024-11-17T17:47:44.283Z","dependency_job_id":"73ece38a-f420-4938-94b4-9cd71d2062a6","html_url":"https://github.com/RVenkatesh/Ember-Slider","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/RVenkatesh/Ember-Slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVenkatesh%2FEmber-Slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVenkatesh%2FEmber-Slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVenkatesh%2FEmber-Slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVenkatesh%2FEmber-Slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RVenkatesh","download_url":"https://codeload.github.com/RVenkatesh/Ember-Slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RVenkatesh%2FEmber-Slider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267150475,"owners_count":24043473,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ember","ember-addon","javascript","likert","likert-scale-survey","range","slider","slider-component","slider-plugin","sliders"],"created_at":"2025-04-01T22:28:51.209Z","updated_at":"2025-10-13T02:22:46.983Z","avatar_url":"https://github.com/RVenkatesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-slider [![Build Status](https://travis-ci.org/RVenkatesh/Ember-Slider.svg?branch=master)](https://travis-ci.org/RVenkatesh/Ember-Slider) [![npm version](https://badge.fury.io/js/%40love-open-source%2Fember-slider.svg)](https://badge.fury.io/js/%40love-open-source%2Fember-slider)[![Rate on Openbase](https://badges.openbase.io/js/rating/@love-open-source/ember-slider.svg)](https://openbase.io/js/@love-open-source/ember-slider?utm_source=embedded\u0026utm_medium=badge\u0026utm_campaign=rate-badge)\n\nThis slider is built as an addon for ember applications. This also supports [likert scale](https://en.wikipedia.org/wiki/Likert_scale). Follow the instructions in the [demo](https://github.com/RVenkatesh/Ember-slider#demo) section to see it in action.\n\n## Screenshots\n##### Basic slider\n\n| type=\"closed\" | type=\"sleek\" |\n| --- | --- |\n| ![Basic slider](https://rvenkatesh.github.io/Ember-Slider/screenshots/slider.png) | ![Basic sleek slider](https://rvenkatesh.github.io/Ember-Slider/screenshots/slider-sleek.png) |\n\n##### Likert scale slider\n\n| type=\"closed\" | type=\"sleek\" |\n| --- | --- |\n| ![Likert scale slider](https://rvenkatesh.github.io/Ember-Slider/screenshots/likert-slider.png) | ![Likert scale slider](https://rvenkatesh.github.io/Ember-Slider/screenshots/likert-slider-sleek.png) |\n\n## Demo\n\nThe demo for this addon is available at https://rvenkatesh.github.io/Ember-Slider/\n\nor alternatively you can also clone the repository and run it locally by following the below instructions\n\n* `git clone \u003crepository-url\u003e` this repository\n* `cd ember-slider`\n* `npm install`\n* `ember serve`\n* Demo will be available at [http://localhost:4200](http://localhost:4200).\n\n## Installation\n```\nnpm install @love-open-source/ember-slider --save\n```\nor\n```\nember install @love-open-source/ember-slider\n```\nNote that versions below v1.2.0 used [compass](http://compass-style.org/) for compiling the styles. If you do not have it already, please follow [this link](http://compass-style.org/install/) to install it before installing addon.\n## How to use\nInclude the ember slider component in the template like any other normal ember component\n```\n{{ember-slider config=options}}\n\nor \n\n\u003cEmberSlider @config={{options}}/\u003e\n```\nAdd configuration options if necessary in the corresponding route's controller or component's class\n```\n{\n    type: 'closed',\n    range: {\n        min: 0,\n        max: 100\n    }\n}\n```\nRefer [Configurations options](https://github.com/RVenkatesh/Ember-slider#configuration-options) section for details about the different options available.\n\n## Parameters\n\nThe component provides different parameters as mentioned below. These can be used as ```{{ember-slider initialValue=50 config=options onChange=(action 'onChangeAction')}}```\n\n| Params | Default value | Description |\n| --- | --- | --- |\n| initialValue | ```0``` | To load the slider with value other than min value. |\n| config | ```null``` | General settings for the slider like range, likert and more. Refer [Configurations options](https://github.com/RVenkatesh/Ember-slider#configuration-options) section for details about the different options available. |\n\n##### Callback parameters\n\nApart from the above parameters, following are the callbacks provided by the addon.\n\n| Function | Params | Description |\n| --- | --- | --- |\n| onChange | ```( oldValue, newValue )``` | This is called when the value of the slider changes. |\n\n## Options under _'config'_ options\n\nThese are the different options available under 'config' parameter of the slider.\n\n| Option | Default value | Description |\n| --- | --- | --- |\n| type | 'sleek' | Changes the look and feel of the slider. Currently it supports only 'sleek' and 'closed'. |\n| range | { min: 0, max: 100 } | This object can be used to change the min and max of the slider. This can be of following format. ```{ min: `min_value`, max: `max_value` }``` |\n| hideValue | false | Boolean to show or hide the value of the slider. ```true``` hides the value. |\n| likert | {} | Settings for likert scale. Refer section [Likert scale options](https://github.com/RVenkatesh/Ember-Slider#likert-scale-options) to know more about likert configuration. |\n\n##### Likert scale options\n\nThe 'likert' property under config option provides the settings for likert scale. Likert scale can be enabled by passing the following to 'config' parameter of the slider \n```\n{\n    likert: {\n        enabled: true\n    }\n}\n```\n\nJust enabling likert scale would provide a 3-point likert scale slider with values ranging from 0 to 2. It can be customised by the following configuration options available.\n\n| Option | Default | Description |\n| --- | --- | --- |\n| enabled | false | Enable or disable likert scale |\n| points | 3 | Number of likert points to be shown. As of now ```ember-slider``` supports 3, 5 and 7 points. |\n| labels | [] | Label text to be displayed under each likert point of the slider. If nothing has to be displayed, pass ```null``` |\n\n## Generating custom slider theme color\n\nEmber slider provides a blueprint, using which you can change the look and feel (colors \u0026 size) of the slider within minutes. Run the blueprint with your preferred color values and the amount of scaling you need, it will give you the scss file with autogenerated code. To make use of the generator, you must have [ember-cli-compass-compiler](https://github.com/quaertym/ember-cli-compass-compiler) installed in your application.\n\n##### Syntax\n```\nember g custom-slider \u003cname_of_the_scss_file\u003e \u003coptions\u003e\n```\nFollowing are the options available.\n- --pathcolor - `\u003ctype:string\u003e` Background color of the handle movement path\n- --fillerColor - `\u003ctype:string\u003e` Background color of the region selected\n- --handleColor - `\u003ctype:string\u003e` Background color of the handle\n- --classList - `\u003ctype:string\u003e` CSS classname to be given to the generated slider\n- --scale - `\u003ctype:number\u003e` Amount by which the entire slider needs to be scaled. Default is 1.\n\n##### Examples\n1. To generate a red colored slider, you can do\n```\nember g custom-slider red-slider --pathColor=\"#f5f5f5\" --classList=\"red\" --fillerColor=\"rgba(#ff6b43, .3)\" --handleColor=\"#ff6b43\"\n```\nThe above command will generate a file called `_red-slider.scss` inside `app/styles` directory of your application.\n\n2. You can also generate 2 or more sliders at the same time.\n\n```\nember g custom-slider all-sliders  --classList=\"red green\" --pathColor=\"#f5f5f5 #f5f5f5\" --fillerColor=\"rgba(#ff6b43, .3) rgba(#79c03b, .3)\" --handleColor=\"#ff6b43 #79c03b\" --scale=\"1 0.9\"\n```\n\n## Updating ember-slider\nIf you are updating one version of ember slider to other, please check out the [Release notes](https://github.com/RVenkatesh/Ember-Slider/wiki/Release-notes) page for any breaking changes (which are usually rare). \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvenkatesh%2Fember-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frvenkatesh%2Fember-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvenkatesh%2Fember-slider/lists"}