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

Answer 1

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.