Data driven range slider

Add interactivity to your web apps

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

Check out examples

• Observable example (Most Updated)

Check out several libraries and frameworks integrations

• Vue.js Integration
• React integration
• Angular integration

Installing

npm i data-driven-range-slider

Usage

const RangeSlider = require ('https://bundle.run/data-driven-range-slider@1.0.0');
 
 
new RangeSlider()
   .container(<myDOMElement>)
   .data(<myData>)
   .accessor(d=> d.<myDataPropertyName>)
   .aggregator(group => group.values.length)
   .onBrush(d=> /* Handle range values */)
  
   .svgWidth(800)
   .svgHeight(100)
   .render()
 

Author

David B (twitter)
David B (linkedin)