Slider dell'interfaccia utente JQUERY con sfondo di immagini e completamente reattivo - javascript, jquery, html, css, jquery-ui

Quello che sto cercando di ottenere è questo:

E quando il cursore è in un qualsiasi punto diverso dal 100%:

I requisiti sono:

• Il gradiente sul lato sinistro non deve cambiare in base alla larghezza disponibile mentre la freccia si sposta lungo il cursore. Dovrebbe mostrare esattamente la stessa quantità di gradiente come mostrato nei due esempi precedenti.
• Il cursore deve essere completamente reattivo. Ciò significa che quando il dispositivo di scorrimento è troppo grande e se si utilizza il gradiente come immagine di sfondo, l'immagine deve occupare il cursore completo anziché ripetere o fermarsi alla larghezza del 100% dell'immagine e prendere correttamente il colore di sfondo. Lo stesso vale quando il cursore si restringe di dimensioni.
• Tutti gli elementi nel cursore (compresa la freccia rotonda devono essere reattivi).

Ho finora provato a farlo usando la proprietà dell'immagine di sfondo, ma affrontando i vincoli di cui sopra quando si tratta di reattività.

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

risposte:

0 per risposta № 1

guarda alla fine del css e personalizza la tua strada:

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

---

A proposito dello sfondo:

Uso :

$( 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...");
});

In breve, i CSS non sono sufficienti a renderlo reattivo al 100%. Devi usare un po 'di JQuery.

---