Data driven range slider

Add interactivity to your web apps

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

Check out Introduction

Check out examples

• Observable example (Most Updated)
• JSFiddle example

Check out several libraries and frameworks integrations

Integrations

• Vue.js Integration
• React integration
• Angular integration

Installing

npm i data-driven-range-slider

Usage

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


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)

I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise

You can also book data viz related consultation session with me