hiding the slider input box in jquery - jquery-mobile

Question

I am using jquery Mobile 1.0.
I have this html code.
<label for="slider" class="ui-hidden-accessible">
Input slider:
</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
Its rendering like this:
But I want to remove the red marked part. I want to show only slider part.
How can this be done?

Answer 1

If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
Or as Frederic Hamidi stated, you can just hide the element all together and only a slider will be visible.
Here is a demo of the above code: http://jsfiddle.net/EWQ6n/1/
Also you can hide the input element with CSS (which is nice because you don't have to time the execution of the CSS like you do with JS):
.ui-slider-input {
display : none !important;
}
Here is a demo using CSS: http://jsfiddle.net/EWQ6n/2/
Update
Instead of using the !important keyword, you can also make a more specific CSS rule so it is used over the jQuery Mobile classes. An example would be:
.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}

Answer 2

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

Answer 3

You could hide the input control manually:
$("#yourPage").live("pageinit", function() {
$(".ui-slider-input").hide();
});

Answer 4

If you only want to get rid of the up/down arrow use type="text" data-type="range"
<input type="text" data-type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />

Answer 5

I wanted to do this too, but I also wanted the space to go away. I accomplished this this way (I'm using a range slider):
<div data-role="rangeslider" data-mini="true" class="no-number">
<input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439">
<input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>
Notice I added the .no-number to the div.
Then in css:
/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
display : none;
width: 0px;
}
/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
margin: 0 5px; !important
}
I'm doing this all as part of a bigger issue, which is that I'm trying to use a range slider for time instead of numbers, so I replaced those elements with a heading I can change with a function to display the time.
This may not be the perfect choice, but I didn't see where to get the space back anywhere, so I thought I would post it here.

Answer 6

When you do it using CSS approach, you may break the input filed of other. So adding the class="ui-hidden-accessible" class to the input to hide it.
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="#(Model.QuestionNo)_slider"
value="25" min="0" max="100" class="ui-hidden-accessible"/>
Check this SAMPLE DEMO

Answer 7

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" />
but look that anoy offset
.ui-slider-track {
margin: 0 15px 0 68px; ----> change to 10
}

Answer 8

You Can Remove Input Slider As Below :
input.ui-slider-input {
display: none;
width: 0;
}
.ui-slider-track {
margin: 0 15px 0 15px !important;
}