Slider javascript Vertical - Javascript

A vertical slider is a user interface element that can be used to select a value from a range of numbers by sliding a handle up or down a vertical bar. In this article, we will discuss how to create a vertical slider using Javascript.

Getting Started

To get started, we will create an HTML file to hold our slider. We will create a div with an ID of "vertical-slider" and a class of "slider". We will also create a span with an ID of "value" to display the selected value.

<div id="vertical-slider" class="slider">
    <span id="value"></span>
</div>

Next, we will add some CSS to style our slider. We will set the width and height of the slider and add a background color and border. We will also style the handle of the slider by setting its width and height, border-radius, and background color.

.slider {
    width: 20px;
    height: 150px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    position: relative;
}
.slider:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    background-color: #999;
}
.slider .handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f44336;
    position: absolute;
    top: 0;
    left: -9px;
    cursor: pointer;
}

Now, we will add some Javascript to make our slider work. We will add an event listener to the handle of the slider that will allow the user to drag it up and down the slider. We will also update the value displayed in the span.

var slider = document.getElementById("vertical-slider");
var handle = slider.querySelector(".handle");
var value = slider.querySelector("#value");
var min = 0;
var max = 100;

handle.addEventListener("mousedown", function(event) {
    event.preventDefault();
    var startY = event.clientY;
    var handleTop = parseInt(getComputedStyle(handle).top);
    var diffY = 0;

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

    function onMouseMove(event) {
        diffY = event.clientY - startY;
        var newY = handleTop + diffY;
        newY = Math.min(Math.max(newY, 0), slider.offsetHeight - handle.offsetHeight);
        handle.style.top = newY + "px";
        var percent = (newY / (slider.offsetHeight - handle.offsetHeight)) * 100;
        var val = Math.round(((max - min) * percent) / 100) + min;
        value.innerHTML = val;
    }

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

Finally, we will add some code to initialize our slider with a default value.

handle.style.top = ((defaultValue - min) / (max - min)) * (slider.offsetHeight - handle.offsetHeight) + "px";
value.innerHTML = defaultValue;

Conclusion

In this article, we have discussed how to create a vertical slider using Javascript. We have covered the HTML, CSS, and Javascript needed to create a functional slider, as well as an example of how to initialize the slider with a default value. With this knowledge, you should be able to create your own custom sliders to enhance your user interfaces.