Ciao Ragazzi, sono nuovo del forum.
Sto realizzando un range che svolga la seguente funzione con onchange.
Cerco di spiegarmi meglio una volta che cambio la posizione del valore oltre a darlo in output (lo fa benissimo con una funzione trovata tempo fa) deve cambiare il background ed il color font.
vi scrivo qui css, div html e funzione js
Sto realizzando un range che svolga la seguente funzione con onchange.
Cerco di spiegarmi meglio una volta che cambio la posizione del valore oltre a darlo in output (lo fa benissimo con una funzione trovata tempo fa) deve cambiare il background ed il color font.
vi scrivo qui css, div html e funzione js
HTML:
<style>
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 660px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 620px;
height: 20px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
border-radius: 50%;
background: #18a55e;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #fff;
}
input[type=range]::-moz-range-track {
width: 400px;
height: 5px;
background: #fff;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #18a55e;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 620px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #fff;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #fff;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 30px;
width: 30px;
border-radius: 50%;
background: red;
}
input[type=range]:focus::-ms-fill-lower {
background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
background: #fff;
}
output {
position: relative;
background: url([url]http://www.goodbuyauto.it/vendinew/i...mcontent.png);[/url]
background-repeat: no-repeat;
width: 160px;
height: 60px;
text-align: center;
color: #00C071;
border: 20px;
display: block;
font: bold 30px Source Sans Pro;
bottom: -50%;
}
output:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #999999;
top: 100%;
left: 40%;
}
</style>
<script type="text/javascript">
function ControlloKm() {
var x = $ ( ".range_km"). val ();
//creazione var targa per controllo
if ( x == 105000)
//controllo con serch
//if (kminput.value > 100000)
{
// In caso di errore stampo un avviso e pulisco il campo...
// document.getElementById("error1").innerHTML = "<p>I valori inseriti non sono di una targa autorizzata</p>";
document.getElementById('error2').hidden = false;
document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentfail.png ');
document.getElementById('km').style.color ="#fff";
//alert("I valori inseriti non sono di una targa autorizzata");
}
else{
document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentok.png ');
document.getElementById('km').style.color ="#fff";
document.getElementById('check3').hidden= false;
document.getElementById('check4').hidden= false;
}
}
</script>
<div id="selezione_km" style="background: transparent url([url]http://www.goodbuyauto.it/vendinew/images/KM_BG.png[/url]) no-repeat" alt="sfondomenu" >
<img src="http://www.goodbuyauto.it/vendinew/images/KM_Auto.png" />
<br>
<br>
<input type="range" name="range_km" id="range_km" min="0" max="105000" step="5000" value="10000">
<output for="range_km" id="km" oninput="value" onchange="ControlloKm(range_km)"> </output>
<script>
var el, newPoint, newPlace, offset;
// Select all range inputs, watch for change
$("input[type='range']").change(function() {
// Cache this for efficiency
el = $(this);
// Measure width of range input
width = el.width();
// Figure out placement percentage between left and right of input
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -34;
// Prevent bubble from going beyond left or right (unsupported browsers)
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint; }
// Move bubble
el
.next("output")
//.next("auto")
.css({
left: newPlace,
marginLeft: offset})
.text(el.val());
})
// Fake a change to position bubble at page load
.trigger('change');
</script>
<br>
</div>
Ultima modifica di un moderatore:
