How to make this slider control to work in both directions?


Tags: javascript,jquery,html,css

Problem :

I'm trying to make a range slider but it's working in single direction(to right) only and dragging out of parent container(#volume). How can I fix this?

I've attached a demo fiddle link.

Markup

<div id="volume">
    <div class="progress">
        <div class="volumeslider"></div>
    </div>
</div>

CSS

#volume{
    width:300px;
    background: #ddd;
    cursor:pointer;
}
.progress{
    height:10px;
    background:#999;
    position:relative;
    width:0;
}
.volumeslider {
    background: #808080;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    right: -10px;
    top: -5px;
}

JS

$('.volumeslider').bind('mousedown', function(e){
    $('.volumeslider').bind('mousemove', function(e){
        $('.progress').width(e.pageX - $('.progress').offset().left + 'px');
        $(this).css('left', e.pageX - ($(this).width()/2) );
    });
    $('.volumeslider').bind('mouseup',function(){
        $('.volumeslider').unbind('mousemove');
    });
});

JS Fiddle: http://jsfiddle.net/2mYm7/



Solution :

Here's an example of how to make it work always and everywhere. Right now it will stay dragging forever if you leave the element.

It includes border checks and makes sure the body is large enough so it stops dragging wherever on the page.

http://jsfiddle.net/2mYm7/5/

var dragging = null;

function startDrag(){
    console.log('started dragging', this);
    var $this = $(this);
    dragging = $this;
    $(document.body).bind('mouseup', stopDrag);
    $(document.body).bind('mousemove', drag);
}

function stopDrag(){
    console.log('stopped dragging', dragging[0]);
    $(document.body).unbind('mouseup', stopDrag);
    $(document.body).unbind('mousemove', drag);
    dragging = null;
}

function drag(e){
    var slider = dragging;
    var progress = slider.parent();
    var container = progress.parent();
    var maxOffset = container.width();
    progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}

$('.volumeslider').bind('mousedown', startDrag);

    CSS Howto..

    jQuery - How to make images overlap when fading in and out?

    How to wrap div containing spans containing the text to be wrapped?

    How can I target a element inside h2

    How to center align a div vertically which uses bootstrap?

    How can I place rotated text against a table with HTML and CSS?

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How to display size and icon for pdf and word docs?

    How is Facebook's website front-end and it's right sidebar designed?

    How to make a space between tags (icons) in table?

    How to animate an “:after” using CSS or jQuery

    How to add media attribute to ASP.NET MVC4 style bundle

    How to exclude a child from the parent css property?

    How to achieve no outside margins for floats in a div

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How to add shadow to reverse c radial gradient only at the edges?

    CSS how to make icons look like they are inside the backround

    How to use bootstrap to hide one of div when zoom browser windows size smaller

    How can I do the following thing without inline styling?

    How to create two Tables in JavaScript and use with different CSS?

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to remove flexbox default padding/margin/pagemargin?

    How to Convert RGB to HEX ( for Gradients )

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    How to make my text appearing while scrolling website

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How to position 3 images on top of one another and retain responsiveness using just CSS?

    How to switch css table-cell from left to right?

    html / css / pre / code: how to force carriage return

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How do you make an input element fill parent?