Jquery slider - werte übergeben

[Forumsgast]

hey ich wollte für eine suche einen jquery-slider einbauen - wo man die auswahl mit filtern kann .. zb. preis von 100 bis 300 euro - ich finde den sldier hier z.b. ganz gut
http://jqueryui.com/demos/slider/#range

hier der code:

$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

das einbinden ist ja kein problem - nur ich weiß jetzt nicht wie man die beiden werte dem formular wo es ausgeführt wird übergibt - die werte müssen ja eigentlich einem input feld übergeben werden und wenn ich dann auf submit drücke das die mit übergeben werden

wäre euch wirklich sehr dankbar wenn ihr mir da weiterhelfen könntet..wenn ihr noch irgendwelche anderen informationen braucht meldet euch

[Forumsgast]

Wenn ich das richtig sehe, sind die Werte in einem Array gespeichert: ui.values[ 0 ] und ui.values[ 1 ]. Einfach bei Submit die Werte mit als Fields übergeben oder zusätzlich in hidden Input Felder eintragen sobald die Werte geändert werden.

[Forumsgast]

hey danke schonmal für deine antwort - wie würde denn das input-feld aussehen - bzw wie übergibt man nun die werte - wäre das so in der art richtig, wie ich das unten gemacht habe (siehe unten beim javascript document... und input-felder)?

<script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );


             // soll werte uebergeben
             document.forms["formular"].elements["summe1"].value = ui.values[ 0 ];
             document.forms["formular"].elements["summe2"].value = ui.values[ 2 ];
    });
</script>


<form method="post" name="formular">
    <input type="hidden" name="summe1" value="" />
    <input type="hidden" name="summe2" value="" />
</form> 

besten dank schonmal

[Forumsgast]

Vorneweg ich bin kein JS und kein jQuery Profi ich lege mich auch gerade damit an von daher hege ich keinen Anspruch auf Vollständigkeit

<script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );


             // soll werte uebergeben
             document.forms["formular"].elements["summe1"].value = ui.values[ 0 ];
             document.forms["formular"].elements["summe2"].value = ui.values[ 1 ];
             
             //Alternativ
             $("[name=\"summe1\"]").val($( "#slider-range" ).slider( "values", 0 ));
             $("[name=\"summe2\"]").val($( "#slider-range" ).slider( "values", 1 ));
    });
</script> 

Wenn du jQuery UI nutzt würde ich mich dann auch komplett an jQuery halten ... vereinfacht vieles siehe meine Alternative

Testweise machste aus deinen Hidden Fields erstmal nurmale text fields um sehen ob was drinne landet oder holst dir Firebug wenn du Firefox nutzt und gibst per console.log($( "#slider-range" ).slider( "values", 1 )); die Werte aus. Denke daran die WertID entsprechend anzupassen (0 und 1).

[Forumsgast]

hey ich dank dir=)
habe es vorhin schon selbst hinbekommen - habe es nun so gelöst:

$(function() {
    $( "#slider-range-price" ).slider({
        range: true,
        min: 0,
        max: 1000,
        values: [ 0, 500 ],
        slide: function( event, ui ) {
            $( "#price-low" ).val( ui.values[ 0 ]);
            $( "#price-high" ).val( ui.values[ 1 ]);
        }
    });
    $( "#price-low" ).val($( "#slider-range-price" ).slider( "values", 0 ));
    $( "#price-high" ).val($( "#slider-range-price" ).slider( "values", 1 ) );
});


<input type="text" id="price-low" name="price-low" />
<input type="text" id="price-high" name="price-high"  /> 

die übergabe ist ja exakt so wie bei dir=) nur oben konnte man noch was wegnehmen..vielen dank