jQuery: How to collect values from sliders into simple object with id as keys

Question

I have several jQuery UI Sliders and I want to collect their values. Thought it would be a simple task, but when I was going to do it I got stuck and not quite sure what to do anymore :p

The object I would like to end up with should look something like this:

{
   a: 80,
   b: 90,
   c: 20,
   ...
}

I can do it manually like this:

var values = {
    a: $('#a').slider('value'),
    b: $('#b').slider('value'),
    c: $('#c').slider('value'),
    ...
};

But that's a bit tedious, especially if I need to add or remove or rename. Was hoping I could do something with the map or each function or something like that, but I can't figure it out. Anyone have some clever ideas?

Answer 1

You can use the class it assigns, .ui-slider and loop through to get/store values, like this:

var sliders = {};
$(".ui-slider").each(function() {
  sliders[this.id] = $(this).slider('value');
});
//sliders == { a:0, b:0, c:0 }

You can view a demo here, tried to keep it short :)