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;
}