Sliderwerte gehen nicht an Input und 2stellen hinter Komma

gianfranco0104

Erfahrenes Mitglied
Ji, habe hier einen kleinen jQuery Code:

Javascript:
<input id="slider-input" class="slider-input" type="range" min="0" value="0" max="100">
<script>
$('#slider-input').change(function () {
    var val_pump01 = $(this).val_pump01();
    //var valRounded = val_pump01;// Math.round(val_pump01 * 10) / 10;
  
    //var mid = $(this).attr('max') / 2;
    $('#pump_value').text(val_pump01);
    $( "#pump_value" ).val_pump01( "MW10=" + val_pump01 );

});
</script>
<input id="pump_value" >

Der Slider geht soweit. allerdings bekomme ich die Werte nicht in mein Inputfeld übertragen und zurück. ALso wenn ich manuell was eingebe soll auch hier der Slider sich anpassen. Was ich auch nicht schaffe ist die Auflösung für 2 Sellen hinter dem Komma. Hatte es schon mit Round versucht (s. aus kommentiert) aber das geht auch nicht. Kann mir jemand unter die Arme greifen?

vielen Dank im Voraus :)

UPDATE (12.11.14, 11:00)
Habe Raus wie ich den geslideten Wert ins Inputfeld eintragen lasse:
Javascript:
<input id="slider-input" class="slider-input" type="range" min="0" value="0" max="6">
<script>
$('#slider-input').change(function () {
    var val = $(this).val();
    //var valRounded = Math.round(val * 1) / 10;
    document.getElementById('pump_value').value = $(this).val();
    //var mid = $(this).attr('max') / 2;
});

</script>
<input id="pump_value" ><span> Bar </span>

nur leider komme ich noch immer nich dahinter wie ich Kommawerte bekomme und den Manuell eingetragenen Wert zurück gebe, sodass der Slider sich verändert :(
 
Zuletzt bearbeitet:
@SpiceLab , danke mal für die Unterstützung. Soweit habe ich das mit der Dez-Zahl hinbekommen. Allerdings klappt es nicht mit der Input-Sache. Mein Slider ist etwas anders, da sich dieser bei einem WIn8 PC mit dem Finger optimal ziehen lässt und der jQuery-Standard-Slider eben nicht.
Soweit habe ich es jetzt mal gebastelt:
Javascript:
<input id="pump01_input" class="slider-input" type="range" min="0" value="0" max="600">
<script>
    $('#pump01_input').change(function () {
        var val = $(this).val() ;
        document.getElementById('pump_value01').value = $(this).val()/ 100.00;
    });
//erkenne manuelle Inputeingabe (klappt aber nicht)
    $("#pump_value01").keyup(function() {
        $("#pump01_input").change("value" , $(this).val())
    });
</script>
<input id="pump_value01" ><span> Bar </span>

UPDATE 12.11. 22.50 Uhr:

noch einfacher ist die Dezimalstellenunterteilung mit SCALE="0.01", direkt im Inputfeld für RANGE:
HTML:
<input id="pump01_input" class="slider-input" type="range" min="0" value="0" max="6" step="0.01">
so Kann ich mir das (/ 100.00;) im Code Sparen
 
Zuletzt bearbeitet:
HA! habe die Lösung gestern Abend selbst rausbekommen:

Für Das HTML Dokument um den Slieder zu bekommen und die Werte der Slideränderungen in das Input zu portieren:

HTML:
                <input id="pump01_input" class="slider-input" type="range" min="0" max="6" step="0.1" >
                <input id="pump_value01" onKeyUp="ManPump01();"><span> Bar </span>
                <script>
                    $('#pump01_input').change(function () {
                        var val = $(this).val() ;
                        document.getElementById('pump_value01').value = $(this).val()
                    }) ;
                </script>

und eine Funktion um, wenn im Inputfeld Manuell was eingetragen wird, das ganze zurück zu werfen (über onKeyUp="ManPump01();" im Inputfeld die Funktion aufrufen):
Javascript:
     // Manuelle Eintragungen Erkennen und Slider übergeben;
      function ManPump01() {
      document.getElementById('pump01_input').value = pump_value01.value
      }

Danke nochmals an alle die mich hier unterstützt haben.
 
Zurück