JQuery UI to convert multiple groups of radio buttons into a slider

Question

This is a follow-up to Using JQuery UI to convert radio buttons into slider elements. I've created a new question because I need to do things a bit differently from the original so apologies if the question is deemed a duplicate and should be closed.

You can see what I'm trying to do in this jsFiddle and:

$('.question').each(function() {
var qid = $(this).parent().attr('id');
var radios = $(this).find(':radio').hide();
$('.slider').slider({
    min: parseInt(radios.first().data('value'), 10),
    max: parseInt(radios.last().data('value'), 10),
    slide: function(event, ui) {
        radios.filter('[data-value=' + ui.value + ']').click();
    }
});
});

$('button').click(function() {
    alert($(':radio:checked').map(function() { return this.name + ': '+  this.value; }).get());;
});

I've got a couple of problems:

1. I've got multiple sets of radio buttons and I need to pass the correct values for all of them when the form is posted.

   At the moment, only the last question is passing the correct value, the first two are passing the default checked value (I've had to add a checked attribute to the first radio button because if another option isn't selected, no value for that question is passed at all).

2. There's also a positioning problem with the handle, particularly for the last item where it's positioned at 100% which puts it outside the container. It actually looks worse in the Fiddle than my local page where it's only the last item that is out of whack.

   I'm wondering if it's possible to assign a class to the handle relating to its position so I could drag the last one back from 100%.

Answer 1

There are 2 separate problems here, so let's address each.

First up the JavaScript, the problem is the scope of radios. Since it's shared between all sliders, it's always set to the last reference you set it to, which is why you only see the third slider having a value - every slider change is setting the last slider's checkboxes. We can fix that by referencing what we want to change relatively, like this:

slide: function(event, ui) {
  $(this).closest('.question').find('[data-value=' + ui.value + ']').click();
}

The style issue is a bit more complicated, it's the combination of width and margin messing up the slider's calculations - you'd need tweaks all around but removing margin and aligning the width 90% up a level is the biggest impact. You need to:

• Add width: 90% margin: 0 5%; up on .round
• Remove that margin: 0 0 0 2em; on .ui-slider-horizontal
• Remove the border on .ui-slider-horizontal to make it look correct - add the border up on the .round level if you still want one

They would now look like this:

ol .round {
  background-color: #e6e6e6;
  border-radius: 16px;
  margin: 0 0 0.5em; 
  width: 90%;
  margin: 0 5%;
}

.ui-slider-horizontal {
  background: transparent;
  border-radius: 1em;
  border: none;
  height: 2em;
  width: 90%; 
}

I also made other tweaks to the slider handle itself in the fiddle to make it fit a bit better (I think).

You can test the changes together here: http://jsfiddle.net/xs3GL/29/