Removing a textbox in slider mode in jQuery Mobile
I am using these JQM links
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>
I used the slider in the section. in the old version I used the class = "ui-hidden-available" property to not show the text field next to the slider, but in this version it doesn't work. How to remove this textbox. My code
<label for="slider" class="ui-hidden-accessible">
Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25" value="0" min="1" max="100"/>
Should I be using a different version? or in any way to overcome this problem.
thank
source to share
<style type=text/css>
input.ui-slider-input {
display : none !important;
}
</style>
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH19.php
see also
source to share
Remove this one class="ui-hidden-accessible"
with label
.
Your approach is correct. But you need to add class="ui-hidden-accessible"
in input
not on label
.
Your code should look something like this:
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25"
value="0" min="1" max="100" class="ui-hidden-accessible"/>
Check DEMO
source to share
I have placed my slider inside my container div with a specific class ("ui-slider-slider"). Then, in my CSS, I have two children of my div, that is:
div.ui-slider-slider input.ui-input-text {
display: none;
}
div.ui-slider-slider div.ui-slider-track {
margin: 0 15px 0 15px !important;
}
The first rule hides the text box, the second hides the slider bar. Hope this helps :)
source to share