jQuery getting slider value from anonymous slider

Question

I'm looking for help with this:

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?

It already is though isn't it? Refers to var refreshRestaurant which is a function. — techii, Feb 04 '13 at 07:52
no, it is `object` **`refreshRestaurant() TypeError: object is not a function`** — zb', Feb 04 '13 at 07:53
how you would to relate sliders to `ambienceRating` , etc... if they not named any way ? by number of ? — zb', Feb 04 '13 at 07:55
so adding $(function () {rest of refreshRestaurant goes in here}); would make it a function correct? — techii, Feb 04 '13 at 07:59
That's what I'm wondering. I guess you perhaps could make a for-loop that increases by 1 on each iteration and select them that way, but I guess just naming them is more straightforward.. Thanks for helping out btw! — techii, Feb 04 '13 at 08:01
yes, why not name them ? function here should be declared as `function refreshRestaurant () {` if jsfiddle will work again, i'll show you demo — zb', Feb 04 '13 at 08:02
There is no harm in naming them, I just figured there would be a way to get values from anonymous sliders given that they use them in their examples. Here: http://jqueryui.com/slider/#multiple-vertical — techii, Feb 04 '13 at 08:04
Yes, like that. But in your current code, the sliders will just replace each other. I need them in seperate variables so I can filter them. Looks like named sliders are my only option if I want the output from each slider seperately. — techii, Feb 04 '13 at 08:22
just name them and update array like `variables[this.id]=$(this).slider('value');` — zb', Feb 04 '13 at 08:26
Fantastic, can you post the JSbin as an answer so I can upvote and accept? I really appreciate the help! — techii, Feb 04 '13 at 08:36

score 1 · Accepted Answer · answered Feb 04 '13 at 08:46

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;

jQuery getting slider value from anonymous slider

1 Answers1