range-slider-d3

Upgrade to D3 v6 support

Original:

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

Updated for D3 6

npm i range-slider-d3

Original

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)

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