How to create range slider with bubble in React

Let’s assume we have to implement a range slider with bubble. To achieve that maybe most of the developers gonna look for already created solutions/packages. But sometime we don’t get exact thing that we are looking for in that case we need to create that component from scratch. In this article we will gonna create our own range slider with bubble in React.

What exactly we gonna do ?

We will gonna create one parent div with two child. The first child will be an range input and the second child will gonna be a div with input value. Which will gonna move according to the slider position.

Native input with range type will gonna be a best choice because it handles a lot of stuff under the hood. But for value bubble we need to write our own code.

Steps

First of all create a parent div with position relative. Which we needed for the bubble position logic.

    <div className="slider-parent">

    </div>


.slider-parent{
  position:relative;
}

Now add the first child i.e input with type range.

<input type="range" min="1" max="500" />

Add state as well for easy managment.

const [value,onChange]=useState(1);

<input 
type="range"
min="1" 
max="500"
value={value}
onChange={({ target: { value: radius } }) => {
                    onChange(radius);
                  }}
      />

Add our output bubble div which will gonna hold the value.

    <div className="buble"> 
      {value}
      </div>

.buble{
  position:absolute;
}

Now it’s time to add the function for updating the position of our bubble.

  useEffect(()=>{
      const ele = document.querySelector('.buble');
    if (ele) {
      ele.style.left = `${Number(value / 4)}px`;
    }
  })

In above function we are updating our bubble left value according to our input value.

The next question will be why we are diving value by 4.

Let’s assume current value of our input is 428. Now we will gonna adjust the left value manually. We can see at 96px our bubble is aligned. So we need to find a ration value.

currentValue = 428;
bubbleManualADjustValue = 96px;
ratio = currentValue/bubbleManualADjustValue;
ratio = 4;
// Now if we divide our value with ratio we can get our position for bubble.

You will gonna get output like this.

You can write a reusable function for above case.

Full code

import React,{useState,useEffect} from "react";
import "./styles.css";

export default function App() {
  const [value,onChange]=useState(1);

  useEffect(()=>{
      const ele = document.querySelector('.buble');
    if (ele) {
      ele.style.left = `${Number(value / 4)}px`;
    }
  })

  return (
    <div className="slider-parent">
      <input type="range" min="1" max="500" value={value}
         onChange={({ target: { value: radius } }) => {
                    onChange(radius);
                  }}
      />
      <div className="buble"> 
      {value}
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
.slider-parent{
  position:relative;
}

.buble{
  position:absolute;
}

Feel free to check code on codesandbox and give your valuable comments. I hope you have learned something new.

Speed up web development using Webix