user interface - Jquery UI Convert Select's to Range Slider -
i have function , running takes id of select box, hides select , displays jquery ui slider instead. works great fires auto submit other ajax delegate script looks after on same page.
i want take script , convert ui range slider drawing info 2 select boxes.
i have tried add line values: [ 1, 7 ], ui slider called play, display second slider tab cannot connect differant select box.
current function/ html displayed below:
jquery(document).ready(function($) { $('#clarityfrom').each(function(index, el){ //hide element $(el).addclass("slideron"); //add slider each element var slider = $( '<div class="sliderholder"><div class=\'horizontalslider\'></div></div>' ).insertafter( el ).find(".horizontalslider").slider({ min: 1, max: el.options.length, range: 'true', //i tried , got 2 tabs //values: [ 1, 7], value: el.selectedindex + 1, slide: function( event, ui ) { el.selectedindex = ui.value - 1; if(!$.browser.opera && !$.browser.msie) { slider.find("a").text(el.options[el.selectedindex].label); } else { slider.find("a").text(el.options[el.selectedindex].text); } }, stop: function() { $(el).change(); } }); if(!$.browser.opera && !$.browser.msie) { slider.find("a").text(el.options[el.selectedindex].label); } else { slider.find("a").text(el.options[el.selectedindex].text); } //create legend under slider can see options var options = []; (var option in $(el).children()) { if(!isnan(parseint(option))) { options.push(el.options[option].text); } } //the width of each legend/option var width = (slider.width() / (options.length - 1)); //add legend. half width of first , last options display consistency. slider.after('<div class="slider-legend"><p style="width:' + (width / 2) + 'px;text-align:left;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>').parent().find(".slider-legend p:last-child").css("width", width / 2).css("text-align", "right"); //if there many options text wider width, hide text var lastchild = slider.parent().find(".slider-legend p:last-child"); if(lastchild[0].clientwidth < lastchild[0].scrollwidth) { slider.parent().find(".slider-legend p").css("text-indent", '200%'); } }); }); <select name="clarityfrom" id="clarityfrom"> <option>if</option> <option>vvs1</option> <option>vvs2</option> <option>vs1</option> <option>vs2</option> <option>si1</option> <option>si2</option> </select><br><br> <select name="clarityto" id="clarityto"> <option>if</option> <option>vvs1</option> <option>vvs2</option> <option>vs1</option> <option>vs2</option> <option>si1</option> <option>si2</option> </select> any grately appreciated:
html
<select name="clarityfrom" id="clarityfrom"> <option value='1'>if</option> <option value='2'>vvs1</option> <option value='3'>vvs2</option> <option value='4'>vs1</option> <option value='5'>vs2</option> <option value='6'>si1</option> <option value='7'>si2</option> </select> <select name="clarityto" id="clarityto"> <option value='1'>if</option> <option value='2'>vvs1</option> <option value='3'>vvs2</option> <option value='4'>vs1</option> <option value='5'>vs2</option> <option value='6'>si1</option> <option value='7'>si2</option> </select> <div id="slider"></div> <div id="clarrange"></div> script
var s1 = $('#clarityfrom'); var s2 = $('#clarityto'); var slider = $('#slider').slider({ min: 1, max: 7, values: [s1[0].selectedindex + 1, s2[0].selectedindex + 1], slide: function (e, ui) { var r1 = $('#clarityfrom option').eq(ui.values[0]-1).text(); var r2 = $('#clarityto option').eq(ui.values[1]-1).text(); s1.val(ui.values[0]); s2.val(ui.values[1]); $('#clarrange') .html('clarity range: ' + r1 + ' ' + r2); } }); 
Comments
Post a Comment