3

I am using this 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 slider in division. in older version i have used property class="ui-hidden-accessible" for not showing the textbox beside the slider but in this version its not working. How can i 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 use other version ? or any way to overcome this issue.

Thanks

Chakradhar
  • 753
  • 6
  • 14
  • 29

5 Answers5

9
<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 the slider input box in jquery

Community
  • 1
  • 1
Stephen
  • 391
  • 2
  • 5
7

Remove this class="ui-hidden-accessible" from label.

Your approach is correct. But you need to add class="ui-hidden-accessible" to input not on the label.

Your code should be 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 this DEMO

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • The problem with this solution is that it still reserves the space for the input box on the left side (even though its invisible). – Maestro Mar 27 '14 at 15:06
1

I have put my slider inside my own div container with particular class ("ui-slider-slider"). Then in my CSS I have target two children elements 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;
}

First rule hides the text box, the second one makes slider full width. Hope it helps :)

Dariusz Wiechecki
  • 573
  • 8
  • 13
0

Also, the following works: $("#slider").hide(); This is because #slider is the text-box component of the slider.

Saurabh
  • 771
  • 1
  • 7
  • 18
0

For the rangeslider, this is the solution (from Pascal):

        input.ui-slider-input {
            display: none;
        }

        .ui-rangeslider .ui-rangeslider-sliders {
            margin: 0px;
Pascal
  • 1