Data-driven range slider introduction
Published: 2020-05-09 09:07:37

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

![](https://raw.githubusercontent.com/bumbeishvili/Assets/master/Screen%20Shot%202020-05-09%20at%2011.35.03.png)

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 bumbeishvili/data-driven-range-slider no-readme %}




<p align="center">
   <!-- Thanks Vasturiano for this trick -  https://github.com/vasturiano -->
     <a href="https://github.com/bumbeishvili/data-driven-range-slider"><img width="100%" src="https://raw.githubusercontent.com/bumbeishvili/Assets/master/81438390-c0372380-917d-11ea-8c50-e3b25923bdc7.gif"></a>
</p>


**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**
```javascript
data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] 
rangeSlider.data(data)
```
This will give us following result
![](https://raw.githubusercontent.com/bumbeishvili/Assets/master/Screen%20Shot%202020-05-09%20at%2012.21.20.png)

**Custom access**
```javascript
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
![](https://raw.githubusercontent.com/bumbeishvili/Assets/master/Screen%20Shot%202020-05-09%20at%2012.31.30.png)


**Custom aggregation**
Default aggregation is counting, we can use other aggregation methods as well.  For example, let's aggregate sum of numbers
```javascript
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
![](https://raw.githubusercontent.com/bumbeishvili/Assets/master/Screen%20Shot%202020-05-09%20at%2012.39.18.png)


Brushing of the range slider will result in outputting exact ranges and selected data
![](https://raw.githubusercontent.com/bumbeishvili/Assets/master/smp.gif)

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

**Key links**
* [Github repository of project](https://github.com/bumbeishvili/data-driven-range-slider) 
* [Play with it](https://observablehq.com/@bumbeishvili/data-driven-range-slider)
* [Angular, react, vue integrations](https://github.com/bumbeishvili/data-driven-range-slider#integrations)

In the case of questions, follow me on [Twitter](https://twitter.com/dbumbeishvili) or connect on [Linkedin](https://www.linkedin.com/in/bumbeishvili/)

Thank you for reading this, I would love your feedback