html5 - jQuery Mobile Dual Range slider -



html5 - jQuery Mobile Dual Range slider -

i made dual range slider in jqm placing slider on top of each other. there way can stop min exceeding max value?

i'm not sure slider using html5 range input type

<style type="text/css"> .pricerangeinfo{ position: relative; height: 30px; margin-top: 60px; } .pricerangeinfo label{ position: absolute; top: -30px; left: 10px; } /* moves label field */ .pricerangeinfo #buying_slider_min{ top: -40px; position: absolute; left: 100px; } /* moves first input field */ .pricerangeinfo #buying_slider_max{ top: -40px; position: absolute; left: 170px; } /* move sec input field */ .pricerangeinfo div.ui-slider{ position: absolute; } /* move both sliders - adressing 1st slider css hard */ .pricerangeinfo div:last-child{ position: absolute; left: 0px; } /* right 2nd slider position fit on top of 1st slider */ </style> <div class="pricerangeinfo"> <label for="buying_slider_min">price</label> <input type="range" name="buying_slider_min" id="buying_slider_min" class="minbuyingslider" value="0" min="0" max="100" /> <input type="range" name="buying_slider_max" id="buying_slider_max" class="maxbuyingslider" value="100" min="0" max="100" /> </div>

just found yui has great dual slider works jqm!!!

http://developer.yahoo.com/yui/examples/slider/slider_dual_with_highlight.html

would work:

http://jsfiddle.net/nkjqr/2/ http://jsfiddle.net/nkjqr/3/ (still little buggy)

js

$('#buying_slider_min').change(function() { var min = $(this).val(); var max = $('#buying_slider_max').val(); if(min > max) { $('#buying_slider_max').val(min); $('.maxbuyingslider').slider('refresh'); } });

html

<div class="pricerangeinfo"> <label for="buying_slider_min">price</label> <input type="range" name="buying_slider_min" id="buying_slider_min" class="minbuyingslider" value="0" min="0" max="100" /> <input type="range" name="buying_slider_max" id="buying_slider_max" class="maxbuyingslider" value="100" min="0" max="100" data-track-theme="b"/> </div>

css

.pricerangeinfo{ position: relative; height: 30px; margin-top: 60px; } .pricerangeinfo label{ position: absolute; top: -30px; left: 10px; } /* moves label field */ .pricerangeinfo #buying_slider_min{ top: -40px; position: absolute; left: 100px; } /* moves first input field */ .pricerangeinfo #buying_slider_max{ top: -40px; position: absolute; left: 170px; } /* move sec input field */ .pricerangeinfo div.ui-slider{ position: absolute; } /* move both sliders - adressing 1st slider css hard */ .pricerangeinfo div:last-child{ position: absolute; left: 0px; }

jquery html5 jquery-mobile

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -