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"/>

      

enter image description here

Should I be using a different version? or in any way to overcome this problem.

thank

+3


source to share


4 answers


<style type=text/css>
    input.ui-slider-input {
        display : none !important;
    }
</style>

      

http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH19.php



see also

hiding slider input field in jQuery

+9


source


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

+7


source


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 :)

+1


source


In addition, the following works: $("#slider").hide();

This is due to what #slider

is the text component of the slider.

0


source







All Articles