range con input che cambia colore

[andreabud]

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

output { 
  position: relative;
  background: url(http://www.goodbuyauto.it/vendinew/i...mcontent.png); 
  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%;


}



<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(http://www.goodbuyauto.it/vendinew/images/KM_BG.png) 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>

inoltre vorrei che insieme al range si spostasse l'immagine superiore

[ciro78]

ciao Andrea,
benvenuto sul forum. Ti invito a leggere il regolamento in particolare la sezione che riguarda titoli poco adatti e l'utilizzo del tag code.

[andreabud]

ciao scusa se non ho usato i giusti tag per il codice. Però cercavo una supervisione a ciò che ho scritto...

[ciro78]

ciao scusa se non ho usato i giusti tag per il codice. Però cercavo una supervisione a ciò che ho scritto...

lo so , ma per poterti aiutare meglio le persone devono poter leggere il codice formattato in modo corretto altrimenti è difficile. non è successo nulla di ché. Succede spesso ai nuovi membri che si iscrivono senza leggere il regolamento.