Disable slider mouse control?

Question

How can I remove mouse interaction over the slider but keep the function where it decreases when I click the button and change color? (only in jquery mobile and jquery)

So if I press on the slider nothing should happen, only when I press the button.

Can also the slider decrease in the opposite direction? From left to right?

This is the code:

HTML:

<div id='slider' class='sliderBar'></div>
<button>Remove 10%</button>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#slider {
    height:20px;
    max-height:20px;
}

.sliderBar-progress {
        background:rgb(0, 255, 0);
        transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s; /* for Safari */;
    }

JS:

$('#slider').sliderBar({
    start: 100,
    onChange: function (val) {
        var red = 0,
            green = 0;
        if (val >= 50) {
            red = 255 - Math.round(((val - 50) / 50) * 255);
            green = 255;
        } else {
            red = 255;
            green = Math.round(((val) / 50) * 255);

        }
        $('.sliderBar-progress').css({
            background: "rgb(" + red + "," + green + ",0)"
        });
    }
});

$('button').on('click', function () {
 $('#slider').setsliderBar($('#slider').getsliderBar()-10, true);
});

Thank you!

Answer 1

What you are really looking for is a progress bar, not a slider. In your example you appear to be using a third party plugin for the slider; so eliminating mouse interaction and getting right to left functionality would involve changing the plugin code.

Alternatively, it is pretty easy to roll your own with just the functionality you need.

Here is a DEMO

For markup you just need 2 divs:

<div id="slider" class="progressBar">
    <div class="progress"></div>
</div>

Then 2 CSS rules to make the track and bar look the way you want (tweak to your taste). Setting the position of the progress div to right: 0 will make it go from left to right.

.progressBar{
    position: relative;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px #777 inset  ;
    -webkit-box-shadow: 1px 1px 6px #777 inset;
    height: 24px;
    max-height: 24px;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgb(193, 193, 193);
    background-color: rgb(224, 224, 224);
    border-radius: 6px;
}

.progress {
    position: absolute;
    box-sizing: border-box;
    box-shadow: inset 0px 0 5px 0 #777;
    -webkit-box-shadow: inset 0px 0 5px 0 #777;
    right: 0px;
    height: 24px;
    margin-top: 0px;
    background-color: orange; 
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;   
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s; /* for Safari */;
}

For getting and setting the progress/color, add these functions:

function GetProgress(){
    var val = $("#slider .progress").outerWidth();
    var tot = $("#slider").outerWidth();
    if (tot <= 0) return 0;
    return Math.floor(val * 100 / tot);
}
function SetProgress(val){
    if (val < 0) val = 0;
    if (val > 100) vall = 100;
    var color = GetColorForVal(val);
    $("#slider .progress").css({"background": color, "width": val + "%"});
}
function GetColorForVal(val){
    var red = 0,
        green = 0;
    if (val >= 50) {
        red = 255 - Math.round(((val - 50) / 50) * 255);
        green = 255;
    } else {
        red = 255;
        green = Math.round(((val) / 50) * 255);
    }
    return  "rgb(" + red + "," + green + ",0)";
}

You can then get and set progress by calling these functions:

$('#subtract').on('click', function () {
    var curVal = GetProgress() - 10;
    SetProgress(curVal);
});

UPDATE: There can be rounding errors calculating current width, so instead we can read it from the style:

function GetProgress(){
    var curWid = $("#slider .progress")[0].style.width || 100;
    return parseInt(curWid);
}

Updated DEMO