JQUERY UI Slider With Image background and fully responsive

Question

What i am trying to achieve is this:

And when the slider is at any given point other than 100%:

The requirements are:

The gradient on the left side must not change based on the width available as the arrow moves along the slider. It should show exactly the same amount of gradient as shown in the above two examples.
The slider must be fully responsive. That means when the slider is too big and if using the gradient as a background image, the image must occupy the full slider rather than repeating or stopping at the 100% width of the image and taking the background color properly. Same applies when the slider shrinks in size.
All the elements in the slider (including the round arrow must be responsive).

I have so far tried doing this using background image property, but facing the above constraints when it comes to responsiveness.

HTML:

<div id="slider-range-min"></div>

CSS:

body {    
    padding:5vh;
}

#amount {
    border: 0;
    color: #f6931f;
    font-weight: bold;
}

.ui-slider-horizontal {
    height: 8vh;
}

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #cccccc url(http://s13.postimg.org/e9jwzqsqv/gradient.png) no-repeat left top !important;
    color: #222222;
    font-weight: bold;
    height: 15px;
    width: 20vh;
    position: absolute;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #f1f1f1 url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: #222222;
}

.ui-slider-horizontal .ui-slider-handle {
    top: 0.6vh;
}

JS:

$(function () {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min:   30,
        max:   50,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));
});

JSFIDDLE

That fiddle link leads to an image, i think that hasnt been your intention :D — Tom Doodler
You made 99% of the job, your JFiddle gradient management is ok and few code. Making the controller responsive is easy now. — 3pic
@Strukt, but the gradient is not as i showed on example images. If you either expand or reduce the window size, the gradient color does not remain the same. For example on small screen, when the you make the slider 100%, you cant see the green color gradient. — Manu

3pic 3pic · Accepted Answer · 2015-08-24T13:44:17

look at end of css and customize your way:

.ui-slider-handle { height:101%!important; margin-top:-0.75%}

About the background:

Use :

$( window ).resize(function() {
   /*Here, you have to update the gradient width*/
   $("#my_slider.ui-widget-header").width(/* here*/);
   /*or other properties*/
   $("#my_slider.ui-widget-header").css("...prop...","...value...");
});

Brief, CSS is not suffisant to make it 100% responsive. You have to use some JQuery.

JQUERY UI Slider With Image background and fully responsive

1 Answers