How to make a single slider with three pointer

Question

How to make a single slider with three pointer

24 Views Asked by sidramaraddy M At 29 March 2024 at 03:29

Sliders are common user interface components that allow users to select a value from a range. By adding multiple pointers to a single slider, we can provide more flexibility in selecting multiple values. Our goal is to implement a slider with three draggable pointers, each representing a specific value within the slider’s range.

I want to make single slider with three pointer and four values using Vanilla Javascript or angular or React

Original Q&A

There are 1 best solutions below

**sidramaraddy M** · Answer 1 · 2024-03-29T03:46:05.860000

We know how to make a slider of range with two pointers only by using normal HTML tag like

<input type="range" id="points" name="points" min="0" max="10">

But how to make a single slider with three pointer and four values, don’t worry here you can see the solution using normal HTML, CSS, and Javascript

Before we begin, make sure you have a basic understanding of HTML, CSS, and JavaScript. Also, ensure you have a code editor like Visual Studio Code or Sublime Text to write and test your code.

Step 1: Setting up the HTML structure

<!DOCTYPE HTML>
<HTML>

<head>
  <title>Three-Pointer Slider</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="slider-container">
    <div class="slider-track"></div>
    <div class="slider-pointer" data-value="50" style="left: 50%;"></div>
    <div class="slider-pointer" data-value="90" style="left: 90%;"></div>
    <div class="slider-pointer" data-value="100" style="left: 100%;">.
    </div>
  </div>
  <div class="result-container">
    <div>Value 1: <span id="value1">50</span></div>
    <div>Value 2: <span id="value2">40</span></div>
    <div>Value 3: <span id="value3">10</span></div>
    <div>Value 4: <span id="value4">0</span></div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Step 2: Styling the slider with CSS

.slider-container {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #ddd;
}

.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
}

.slider-pointer {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0066cc;
  cursor: pointer;
}

.result-container {
  margin-top: 20px;
  font-size: 16px;
}

Step 3: Implementing the JavaScript logic

const sliderContainer = document.querySelector(".slider-container");
const sliders = document.querySelectorAll(".slider-pointer");
const value1 = document.getElementById("value1");
const value2 = document.getElementById("value2");
const value3 = document.getElementById("value3");
const value4 = document.getElementById("value4");

function updateValues() {
  const values = Array.from(sliders).map((slider) =>
    Number(slider.dataset.value));
  value1.textContent = values[0];
  value2.textContent = values[1] - values[0];
  value3.textContent = values[2] - values[1];
  value4.textContent = 100 - (values[2] - values[1] + values[1] -
    values[0] + values[0]);
}

sliders.forEach((slider) => {
  slider.addEventListener("mousedown", (e) => {
    const target = e.target;
    const sliderWidth = target.parentNode.offsetWidth;
    let prevX = e.clientX;

    function onMouseMove(e) {
      const deltaX = e.clientX - prevX;
      const newPosition = Math.min(Math.max(target.offsetLeft + deltaX, 0),
        sliderWidth);
      prevX = e.clientX;

      target.style.left = newPosition + "px";
      target.dataset.value = Math.round((newPosition / sliderWidth) * 100);
      updateValues();
    }

    function onMouseUp() {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    }

    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  });
});

// Update the values initially
updateValues();

How to make a single slider with three pointer

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in ANGULAR

Related Questions in POINTERS

Related Questions in SLIDER

Trending Questions

Popular # Hahtags

Popular Questions