Boris Boris - 3 months ago 14
CSS Question

jQuery slider with input value on drag after refresh

I've found this grate slider which is combo of 4 sliders sharing 100% value. Problem is that it doesn't pick value of input, yet it resets to 25% for each slider every time page is refreshed. Can someone help by making slider picking value of inputs before they determine position of slider knob.

HTML

<div align="center" class="title">Statistiche:</div>
<div id="outer_container">
<div id="container">
<span class='multislider'>Hokuto ShinKen (<input type='text' required name='question_3' class='amount' value='5' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Nanto (<input type='text' required name='question_3' class='amount' value='15' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Gento (<input type='text' required name='question_3' class='amount' value='50' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Artiglio del Monte Taishan (<input type='text' required name='question_3' class='amount' value='30' data-min='0' data-max='100'/>)
<div class='slider tied'></div>
</span>
</div>
</div>


jQuery

var init = true;
var elements = $(".multislider").children(".slider.tied").length;
var MAX = 100;
var inpVal = $('.txt_name').val();
var initValue = (inpVal) >> 0;
//var initValue = (MAX / elements) >> 0;
var InitMod = MAX % elements;

$(".slider.tied").each(function() {
var slidersTied = $(".slider.tied");
var context = $(this);

var input = context.prev(".amount");
var val = input.data('answer');
var min = input.data('min');
var max = input.data('max');
var range = 1;
var proceed = false;

$(this).empty().slider({
value: val,
min: min,
max: max,
range: range,
animate: "slow",
create: function(event, ui){

if (InitMod > 0) {
$(this).slider('value', initValue + 1);
$(this).prev('.amount').val(initValue + 1);
InitMod = InitMod - 1;
}
else
{
$(this).slider('value', initValue);
$(this).prev('.amount').val(initValue);
}

},
slide: function(e, ui) {

// Update display to current value
$(this).prev('.amount').val(ui.value);

var current = ($(this).index() / 2) >> 0;
var total = 0;
var counter = 0

slidersTied.not(this).each(function() {

total += $(this).slider("option", "value");
counter += 1;
});

total += ui.value;

if (total != MAX){
proceed = true;
}

var missing = MAX - total;
console.log("missing: " + missing);

counter = 0;

if(proceed) {

//carico vettore elementi
var elements = [];

slidersTied.each(function() {
elements[counter] = $(this);
counter += 1;
});

var endIndex = counter - 1;
counter = endIndex + 1;

while (missing != 0) {

console.log("current counter: " + counter);
do {
if (counter == 0)
{
counter = endIndex;
}
else
{
counter = counter - 1;
}
} while(counter == current)

console.log("elemento attuale: " + counter);

var value = elements[counter].slider("option", "value");
var result = value + missing;

if (result >= 0)
{
elements[counter].slider('value', result);
elements[counter].prev('.amount').val(result);

missing = 0;
}
else
{
missing = result;
elements[counter].slider('value', 0);
elements[counter].prev('.amount').val(0);
}

}

}

}
});
});


Example
http://jsfiddle.net/vuQz5/116/

Thanks

Answer

There are two issues, var val = input.data('answer'); is wrong, there is no such data value what you need is to get the input value like this:

var val = input.val(); val = (val) ? val : 0;

and also use that value in create method instead of initValue there is no need for if condition you only need whatever is in the else clause:

$(this).slider('value', val); $(this).prev('.amount').val(val);

Check this fiddle