Simple range /value Slider in JavaScript

Question

I am trying to do a simple Range/Value Slider by using javascript or jQuery , A button in a div .This slider should be done without bootstrap or any other plugin or with inbuild functions

My question is how to move the slider button within the div element and what mouse events are needed to do this?

Note:This is not a slideshow slider or image slider

Answer 1

Take a look at this simple slider implementation. Feel free to use and modify the way you prefer:

 document.addEventListener('DOMContentLoaded', function() { var sliders = document.querySelectorAll('.my-slider'); [].forEach.call(sliders, function(el, i) { var btn = el.firstElementChild, span = el.nextElementSibling.querySelector('span'), isMoving = false; var move = function(e) { if (isMoving) { var min = 0, max = el.offsetWidth - btn.offsetWidth, mousePos = (e.pageX - el.offsetLeft - (btn.offsetWidth / 2)), position = (mousePos > max ? max : mousePos < min ? min : mousePos), value = Math.floor((position / max) * 100); btn.style.marginLeft = position + 'px'; btn.value = value; span.textContent = value; } }; el.addEventListener('mousedown', function(e) { isMoving = true; move(e); }); document.addEventListener('mouseup', function(e) { isMoving = false; }); document.addEventListener('mousemove', function(e) { move(e); }); }); }); 

 .my-slider { width: 250px; border: 1px solid #999; border-radius: 3px; background-color: #ccc; height: 10px; line-height: 10px; } .my-slider__button { border: 1px solid #333; border-radius: 3px; margin-top: -4px; width: 18px; height: 18px; background-color: #eee; display: block; } div { margin-top: 6px; } 

 <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> <div class="my-slider"> <button class="my-slider__button"></button> </div> <div> <strong>Current value: </strong><span></span> </div> 

Answer 2

You use drag and drop events, with a property setting that is restricted to the div it is within. Check out this link Drag Drop Reference Guide , and you will see everything you need. When you use draggable and dropable, you can restrict the movement to horizontal, and also set the element that it is bound to. This will allow you to only move left to right, and restrict vertical movement, and keep in the boundaries of the div. The same features bootstrap uses to get it done.

Here is a basic example showing some of the stuff mentioned:

     $('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

Answer 3

try this :

  $('img').mouseenter(function(){ //or you can use hover()
   // Set the effect type
    var effect = 'slide';

     // Set the options for the effect type chosen
    var options = { direction: "right" };

   // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $(this).toggle(effect, options, duration);
   });