{"id":13481005,"url":"https://github.com/Bogdan1975/ng2-slider-component","last_synced_at":"2025-03-27T11:31:30.000Z","repository":{"id":57741978,"uuid":"55062386","full_name":"Bogdan1975/ng2-slider-component","owner":"Bogdan1975","description":"Angular 2 slider component","archived":false,"fork":false,"pushed_at":"2016-11-23T11:45:14.000Z","size":17,"stargazers_count":68,"open_issues_count":30,"forks_count":50,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-22T21:44:10.510Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Bogdan1975.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-30T12:48:01.000Z","updated_at":"2023-08-07T11:00:37.000Z","dependencies_parsed_at":"2022-09-10T22:52:08.859Z","dependency_job_id":null,"html_url":"https://github.com/Bogdan1975/ng2-slider-component","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/Bogdan1975%2Fng2-slider-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan1975%2Fng2-slider-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan1975%2Fng2-slider-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan1975%2Fng2-slider-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bogdan1975","download_url":"https://codeload.github.com/Bogdan1975/ng2-slider-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222239498,"owners_count":16953961,"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-07-31T17:00:47.536Z","updated_at":"2024-10-30T14:31:13.292Z","avatar_url":"https://github.com/Bogdan1975.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","UI Components","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Form","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# ng2-slider-component\n\n\nStatus:\n[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)]()\n\n\nAngular 2 slider component\n\nDemo: [http://bogdan1975.github.io/slider/](http://bogdan1975.github.io/slider/)\n\n* [Dependencies](#dependencies)\n* [Install](#install)\n* [Usage](#usage)\n    - [Component](#component)\n    - [Events](#events)\n\n\n# Dependencies\n\n- [Angular 2](https://github.com/angular/angular)\n- [SlideAble Directive Module](https://github.com/Bogdan1975/ng2-slideable-directive)   `npm install ng2-slideable-directive`\n- [Styled Directive Module](https://github.com/Bogdan1975/ng2-styled-directive)   `npm install ng2-styled-directive`\n    \n\n# Install\n\nYou can get it on npm.\n\n```shell\nnpm install ng2-slider-component\n```\n\n###`IMPORTANT!`\n\n*.js files compiled for WebPack\n\nIf you use SystemJS, you have to use *.system.js files, they are compiled for SystemJS.\n\nFragment of SystemJS config:\n\n```javascript\npackages: {\n\n    ....\n    \n    'node_modules/ng2-slider-component': {\n            main: 'ng2-slider.component.system.js',\n            defaultExtension: 'system.js' \n    },\n    \n    .... \n    \n}\n```\n\n\n# Usage\n\n```html\n\u003cng2-slider \n    min=\"6\"\n    max=\"23\"\n    startValue=\"9\"\n    endValue=\"21\"\n    stepValue=\"2\"\n    [normalHandlerStyle]=\"{ 'background-color': 'green'}\"\n    [slidingHandlerStyle]=\"{\n          'border-radius': '9px',\n          'background-color': 'red'\n    }\"\u003e\n\u003c/ng2-slider\u003e\n```\n\n\n## Component\n\n### `min`, `max`\n\nThis attributes set range of possible values\n\n### `value`\n\nThis attribute set initial value and set simple mode. `startValue` and `endValue` will be ignored.\n\n### `startValue`\n\nThis attribute set initial floor value. Ignored in `value` was set case.\n\n### `endValue`\n\nThis attribute set initial ceil value and set range mode. Ignored in `value` was set case.\nIn case of this attribute is not set, mode will be set to simple\n\n### `stepValue`\n\nAttribute set step value\n\nDefault value: \"1\"\n\n### `normalHandlerStyle`, `slidingHandlerStyle`\n\nThis attributes set styles of slider handles in normal and sliding modes\n\nExample:\n\n```html\n\u003cng2-slider min=\"3\"\n    max=\"33\"\n    value=\"7\"\n    stepValue=\"1\"\n    [normalHandlerStyle]=\"{ 'background-color': 'blue'}\"\n    [slidingHandlerStyle]=\"{\n          'border-radius': '9px',\n          'background-color': 'orange'\n    }\" \u003e\n\u003c/ng2-slider\u003e\n```\n\n\n\n## Events\n\n### `onRangeChanged`\n\nEvent `onRangeChanged` fired when range was changed","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBogdan1975%2Fng2-slider-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBogdan1975%2Fng2-slider-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBogdan1975%2Fng2-slider-component/lists"}