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

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)

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))

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))

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

• Github repository of project
• Play with it
• Angular, react, vue integrations

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

Thank you for reading this, I would love your feedback