CODEWITHSUNDEEP
jqueryjquery-uisliders
techii
techii

Reputation: 113

jQuery getting slider value from anonymous slider

I'm looking for help with this:

http://jsfiddle.net/techii/9e2cJ/2/

and this is a follow-up question to this

But because this isn't a "come here with your problem and we will do it for you" site I have one spesific question in particular

In the jsfiddle above I'm using anonymous sliders and the function reacting to slide/change is supposed to filter/match restaurants parsed from JSON. I'm trying to extract values from my four sliders, but they have to be matched to their respective vars e.g. ambienceSliderValue when collected so I can compare them to their JSON counterparts (ambienceRating)

var refreshRestaurant = 
    $(".restaurant > div").each(function(){
            // Some code to extract things like spicyness, expensiveness
            // this part should maybe be in the JSON object constructor above to push data? Perhaps I should use .val(); instead?
            var ambienceRating = $(this).data("ambienceRating");
            var spicyRating = $(this).data("spicyRating");
            var garlicRating = $(this).data("garlicRating");
            var expensiveRating = $(this).data("expensiveRating");

               // Also some code to get the slider values...


            var isMatch = ambienceSliderValue <= ambienceRating && spicySliderValue <= spicyRating && garlicSliderValue <= garlicRating && expensiveSliderValue <= expensiveRating;
            $(this).toggle(isMatch);
    })

Is my only solution to use named sliders?

Upvotes: 0

Views: 98

Answers (1)

zb&#39;
zb&#39;

Reputation: 8049

For example I'll show variables update from callback function:

HTML:

<div class="sliders">
    <div id='a'></div>
    <div id='b'></div>
    <div id='c'></div>
    <div id='d'></div>
</div>

JS:

$(function () {
  var vars={};
    $('.sliders div').slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 100,
        step: 1,
        value: 0,
        slide: refreshRestaurant,
        change: refreshRestaurant
    }); 

    function refreshRestaurant() {
     vars[this.id]=$(this).slider('value'); 
      console.log(vars);
    }
});

DeMO;

Upvotes: 1

Related Questions