DEV Community 👩‍💻👨‍💻

Cover image for  Data-driven range slider introduction
David B.
David B.

Posted on

Data-driven range slider introduction

Recently, I was working on a project, where I needed a simple and beautiful range slider component with data distribution displayed above.

Surprisingly, the search process finished unsuccessfully. I needed it for a React project, which further narrowed down my search results.

The closest thing I found was kepler.gl 's range slider, which was really beautiful and functional as well

So, I tried extracting it from the project and after 4 hours of trial and error, I surrendered without major success

That's when I decided to build it on my own and make it available for people like me

I assembled several pieces of codes from my past projects and designed a dark version of range-slider

So, there it is

GitHub logo bumbeishvili / data-driven-range-slider

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

key points

  • Easy to use
  • Very fast
  • Filters and outputs data on its own (and does it in a performant way)
  • Easy libs & frameworks integrations
  • Intuitive data configuration

Let's review 3 scenarios of the data configuration process

Simple data

data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] 
rangeSlider.data(data)
Enter fullscreen mode Exit fullscreen mode

This will give us following result

Custom access

data = ['may 1', 'may 2', 'may 3', 'may 4', 'may 4', 'may 4', 'may 4', 'may 5', 'may 6']
rangeSlider
  .data(data)
  .accessor(d=> new Date(d))
Enter fullscreen mode Exit fullscreen mode

This will give us following result

Custom aggregation
Default aggregation is counting, we can use other aggregation methods as well. For example, let's aggregate sum of numbers

data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] 
sumArray = (arr)=> arr.reduce((a,b)=>a+b, 0)
rangeSlider
  .data(data)
  .accessor(d=>d) // we could have skipped this
  .aggregator(group => sumArray(group.values))
Enter fullscreen mode Exit fullscreen mode

This will give us the following result

Brushing of the range slider will result in outputting exact ranges and selected data

It's a good way of adding interactivity to your web applications

Key links

In the case of questions, follow me on Twitter or connect on Linkedin

Thank you for reading this, I would love your feedback

Top comments (1)

Collapse
 
manitshetty profile image
ManitShetty

Hi, can you please tell me how can I set the initial range values for the slider in Angular?

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now