jquery mobile rangeslider when it hit max value add + sign -
i wondering how add plus (+) sign jquery mobile range slider higher value when max value selected/hit. example on price top range, has + when max value selected.
i tried changing max value <input type="range" name="range-1b" id="range-1b" min="400" max="2000+" value="1500" step="50">
didnt work, tried change script, didnt work either. not sure if possible so.
<script> $(document).on('pageshow',function(){ var value = document.getelementbyid("range-1b").value; if(value =2000){ document.getelementbyid("range-1b").value="2000+"; } }); </script>
when jqm enhances rangeslider, inputs set type="number". type accepts numbers, text '100+' cannot set value of input.
one workaround position '+' next 100:
in rangeslider markup, add <span>
class of labelplus:
<div data-role="rangeslider"> <label for="range-1a">rangeslider:</label> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" /> <label for="range-1b">rangeslider:</label> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" /> <span class="labelplus">+</span> </div>
use labelplus class css hide span , absolutely position in correct spot:
.labelplus{ display: none; position: absolute; right: 0px; font-size: 14px; font-weight: bold; text-align: right; width: 12px; line-height: 30px; margin-right: 18px; margin-top: 0px; }
in javascript, handle change event on high input , check see if @ 100. if so, show plus sign span, otherwise hide it:
$("#range-1b").on("change", function(){ var val = $(this).val(); if (parseint(val) >= 100) { $(".labelplus").show(); } else { $(".labelplus").hide(); } });
Comments
Post a Comment