slider getters and setters
I am working on a general playhead for in-browser video playback:
http://metavid.ucsc.edu/wiki/index.php/Mv_embed
So I need to be able to set the slider via float percentage values.
This is what I am going to use for now (sample from slider.html test
page) :Its a bit of trickery to get slider percentage values to line
up and have have the max value when you slide to the right be 100% or
1:
<div id='slider3' style="position: relative; margin: 40px; width:
217px; height: 28px; background: url(http://developer.yahoo.com/yui/
examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">
<div class='ui-slider-handle' style='position: absolute; height: 21px;
left: 0px; bottom: 0px; width: 17px; background-image: url(http://
developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div>
</div>
<div style="margin: 10px;"><label for="slider3_value">set via float
value:</label> <input type="text" value='0' id='slider3_value' />
<input type="button" value="set value" id="set_slider3"></div>
$('#slider3').slider( { slide: function(e,ui) {
$('#slider3_value')[0].value = ui.pixel/ ( $('#slider3').width()-
$('.ui-slider-handle', $('#slider3').get(0)).width() ) ;
} });
$('#set_slider3').click( function(){
setSliderValue($('#slider3_value').attr('value'));
});
function setSliderValue(perc){
var cur_slider = $('.ui-slider-handle', $
('#slider3').get(0)).width();
var offset_perc = 1-(cur_slider /$('#slider3').width());
var val = Math.round( offset_perc* (perc * $
('#slider3').width() ) );
$('.ui-slider-handle', $('#slider3').get(0)).css('left',val );
}
BUT... if the slider had getters and setters that would make things a
bit clearer something like
$('slider-handle', slider_element).sliderVal() as a getter &
$(slider-handle, slider_element).sliderVal(value) as the setter ?
maybe have a type flag argument so that float percentage values, pixle
values or scale values could also be used? I vote float for default ;P
(it also scriptaculus default setter type)
peace,
michael