https://github.com/bumbeishvili/data-driven-range-slider

D3.js based data-driven range slider, date time support
https://github.com/bumbeishvili/data-driven-range-slider

angular d3 data-driven georgia range-slider range-slider-component range-slider-library react vue

Last synced: 4 days ago
JSON representation

D3.js based data-driven range slider, date time support

• Host: GitHub
• URL: https://github.com/bumbeishvili/data-driven-range-slider
• Owner: bumbeishvili
• License: mit
• Created: 2020-05-08T18:32:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-13T09:24:50.000Z (over 2 years ago)
• Last Synced: 2024-10-28T04:24:07.216Z (7 days ago)
• Topics: angular, d3, data-driven, georgia, range-slider, range-slider-component, range-slider-library, react, vue
• Language: JavaScript
• Homepage:
• Size: 24.4 KB
• Stars: 30
• Watchers: 2
• Forks: 12
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)

# Data driven range slider

Add interactivity to your web apps

[![NPM Version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=1.0.0&x2=0)](https://npmjs.org/package/data-driven-range-slider) 



   

     



D3 and svg based data driven range slider, with good performance

Check out [Introduction](https://dev.to/dbumbeishvili/data-driven-range-slider-introduction-4mj)

Check out examples

* [Observable example](https://observablehq.com/@bumbeishvili/data-driven-range-slider)  (Most Updated)  

* [JSFiddle example](https://jsfiddle.net/079nk83L/2/)

Check out several libraries and frameworks integrations

### Integrations

* [Vue.js Integration](https://stackblitz.com/edit/data-driven-range-slider-vue-integration)  

* [React integration](https://stackblitz.com/edit/data-driven-range-slider-react-integration)  

* [Angular integration](https://stackblitz.com/edit/data-driven-range-slider-angular-integration)  

### Installing

```

npm i data-driven-range-slider

```

### Usage

```javascript

const RangeSlider = require ('https://bundle.run/[email protected]');

new RangeSlider()

   .container()

   .data()

   .accessor(d=> d.)

   .aggregator(group => group.values.length)

   .onBrush(d=> /* Handle range values */)

  

   .svgWidth(800)

   .svgHeight(100)

   .render()

 

```

## Author

 [David   B (twitter)](https://twitter.com/dbumbeishvili)  

 [David   B (linkedin)](https://www.linkedin.com/in/bumbeishvili/)  

I 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

You can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me