draggable slider

by Marc Chehab

HTML

<div class="sliderareas">
<div class="sliders">
  <div class="positions" id></div><div class="thumbs"></div>
</div></div>

<div id="orig">Content</div>

CSS

div#orig { width: 200px; height: 200px; border: 1px solid black; }
div#area { padding: 10px; }
div#area, div#area * { user-select: none; }

div#slider {
  width:100%;
  width:300px;
  //width:calc(100% - 40px);
  margin: 20px 20px;
  height:3px;
  background-color:#D4D4D4;
  cursor: pointer;
}

div#position {
  background-color:#FF0808;
  float:left;
  height:100%;
  width:300px;
  max-width:300px;
}

div#thumb {
  position:relative;
  float:left;
  margin:-3px -5px;
  opacity:1;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #FF0808;
  box-shadow:0px 0px 1px rgba(0,0,0,0.5);
}

JavaScript

$(document).ready(function() {
    var dragging = null;

    $(".sliderareas").on("mousemove", function(e) {
        if (dragging) {
            $(".leftshades").width(e.pageX-$("#position").position().left);
        }
    });
    
    $(".sliderareas").on("mousedown", function () {
        dragging = 1;
    });
    
    $(".sliderareas").on("click", function (e) {
        $(".leftshades").width(e.pageX-$("#position").position().left);
    });
    
    $(document.body).on("mouseup", function (e) {
        dragging = null;
    });
    
    $("#area").on("mouseover", function () {	$("#thumb").stop().animate({opacity:1,height:'10px',width:'10px'}, 100); $("#slider").css({'height':'5px', 'margin': '19px 20px'}); });
    $("#area").on("mouseleave", function () {	$("#thumb").stop().animate({opacity:0,height:'0px',width:'0px'}, 100); $("#slider").css({'height':'3px', 'margin': '20px 20px'}); dragging=null;$("#orig").append("1");
    }); 
});