{"id":13425832,"url":"https://github.com/bumbeishvili/data-driven-range-slider","last_synced_at":"2025-09-21T11:22:30.554Z","repository":{"id":45557822,"uuid":"262399755","full_name":"bumbeishvili/data-driven-range-slider","owner":"bumbeishvili","description":"D3.js based data-driven range slider, date time support","archived":false,"fork":false,"pushed_at":"2022-03-13T09:24:50.000Z","size":25,"stargazers_count":30,"open_issues_count":9,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T11:39:22.885Z","etag":null,"topics":["angular","d3","data-driven","georgia","range-slider","range-slider-component","range-slider-library","react","vue"],"latest_commit_sha":null,"homepage":"","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/bumbeishvili.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-05-08T18:32:12.000Z","updated_at":"2025-02-05T14:37:36.000Z","dependencies_parsed_at":"2022-08-27T21:23:25.962Z","dependency_job_id":null,"html_url":"https://github.com/bumbeishvili/data-driven-range-slider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Fdata-driven-range-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Fdata-driven-range-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Fdata-driven-range-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Fdata-driven-range-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bumbeishvili","download_url":"https://codeload.github.com/bumbeishvili/data-driven-range-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248069824,"owners_count":21042709,"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":["angular","d3","data-driven","georgia","range-slider","range-slider-component","range-slider-library","react","vue"],"created_at":"2024-07-31T00:01:19.996Z","updated_at":"2025-09-21T11:22:25.530Z","avatar_url":"https://github.com/bumbeishvili.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n\n\n# Data driven range slider\n\nAdd interactivity to your web apps\n\n[![NPM Version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js\u0026type=6\u0026v=1.0.0\u0026x2=0)](https://npmjs.org/package/data-driven-range-slider) \n\n\u003cp align=\"center\"\u003e\n   \u003c!-- Thanks Vasturiano for this trick -  https://github.com/vasturiano --\u003e\n     \u003ca href=\"https://observablehq.com/@bumbeishvili/data-driven-range-slider\"\u003e\u003cimg width=\"80%\" src=\"https://user-images.githubusercontent.com/6873202/81438390-c0372380-917d-11ea-8c50-e3b25923bdc7.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nD3 and svg based data driven range slider, with good performance\n\nCheck out [Introduction](https://dev.to/dbumbeishvili/data-driven-range-slider-introduction-4mj)\n\nCheck out examples\n* [Observable example](https://observablehq.com/@bumbeishvili/data-driven-range-slider)  (Most Updated)  \n* [JSFiddle example](https://jsfiddle.net/079nk83L/2/)\n\nCheck out several libraries and frameworks integrations\n### Integrations\n* [Vue.js Integration](https://stackblitz.com/edit/data-driven-range-slider-vue-integration)  \n* [React integration](https://stackblitz.com/edit/data-driven-range-slider-react-integration)  \n* [Angular integration](https://stackblitz.com/edit/data-driven-range-slider-angular-integration)  \n\n\n### Installing\n\n```\nnpm i data-driven-range-slider\n```\n\n### Usage\n```javascript\nconst RangeSlider = require ('https://bundle.run/data-driven-range-slider@1.0.0');\n\n\nnew RangeSlider()\n   .container(\u003cmyDOMElement\u003e)\n   .data(\u003cmyData\u003e)\n   .accessor(d=\u003e d.\u003cmyDataPropertyName\u003e)\n   .aggregator(group =\u003e group.values.length)\n   .onBrush(d=\u003e /* Handle range values */)\n  \n   .svgWidth(800)\n   .svgHeight(100)\n   .render()\n \n```\n\n## Author\n [David   B (twitter)](https://twitter.com/dbumbeishvili)  \n [David   B (linkedin)](https://www.linkedin.com/in/bumbeishvili/)  \n\nI am available for freelance data visualization work. Please [contact me](https://davidb.dev/about) in case you'd like me to help you with my experience and expertise\n\nYou can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbumbeishvili%2Fdata-driven-range-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbumbeishvili%2Fdata-driven-range-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbumbeishvili%2Fdata-driven-range-slider/lists"}