the real problem have not learned enough basic javascript yet. i'm learning it's got me messed right now.
so figure simple can't put head around yet.
i had code got working great , understood enough, got (and it's works great too) don't understand way select object , change it's value using jquery.
here new code (working great):
.html
<div style="display:block;margin:100px auto;padding:0 8%"> <input type="text" id="amount3" style="border:0 none" class="slider_value"> <div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div> <div class="steps"> <?php ($i=0, $t=15; $i<=$t ; $i++) { echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; echo '">|<br>'.$i.'</span>'; } ?> </div> </div>
.js
$(function(){ var value, step, min, max, input; $('.slider_container').each(function(){ input = $(this).prev('.slider_value'); value = $(this).data('value'); step = $(this).data('steps'); min = $(this).data('min'); max = $(this).data('max'); $(this).slider({ value: value, min: min, max: max, step: step, slide: function(event, ui) { $(this).prev('.slider_value').val(ui.value); } }); input.val($(this).slider("value")); }); });
with pure html5 slider it's easy change slider value: document.getelementbyid("slider3").value = '5';
not work new code , can't figure out.
i have number of sliders different ids. have onchange event on field fires ajax sql search , returns data use set sliders on page. works fine until added jquery ui... because don't understand how select slider want change.
turned out not hard:
$(p2).slider({ value: 0, slide: function(event, ui) { $(this).prev('.slider_value').val(ui.value); } });
Comments
Post a Comment