hiding the slider input box in jquery

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: enter image description here

But I want to remove the red marked part. I want to show only slider part.

How can this be done?

Jasper · Accepted Answer · 2012-07-16T16:26:44.670

14

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

edited Jul 16 '12 at 16:26

answered Jan 18 '12 at 16:58

Jasper

75,717
14
151
146

done with css .ui-slider-input { display : none !important; } it worked for me – Chakradhar Jan 19 '12 at 09:05
Thanks Jasper - the "!important" part is actually key, otherwise it doesn't work. (In Chrome, at least) – Anthony Mar 12 '12 at 03:37
@Jasper, nice answer....In addtion, what if i want to display the input box ABOVE the slider at the centre?? – Gk_999 Jul 18 '14 at 06:34
@Jasper, this two jsfiddles you linked to are no longer available could you add them again? – Howli Apr 09 '15 at 14:20

score 5 · Answer 2 · answered Jan 26 '12 at 22:08

5

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

answered Jan 26 '12 at 22:08

TMB

4,683
4
25
44

score 3 · Answer 3 · edited Dec 02 '12 at 12:13

3

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

edited Dec 02 '12 at 12:13

krock

28,904
13
79
85

answered Dec 02 '12 at 11:51

Frans Van Assche

382
3
5

score 3 · Answer 4 · answered Jan 18 '12 at 15:35

3

You could hide the input control manually:

$("#yourPage").live("pageinit", function() {
    $(".ui-slider-input").hide();
});

answered Jan 18 '12 at 15:35

Frédéric Hamidi

258,201
41
486
479

score 2 · Answer 5 · answered Jan 02 '15 at 20:57

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.

score 1 · Answer 6 · answered Jul 18 '13 at 07:00

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

The problem with this solution is that it still reserves the space on the left side (even though the inputbox is hidden). — Maestro, Mar 27 '14 at 15:07

score 1 · Answer 7 · edited Mar 27 '14 at 22:20

1

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

edited Mar 27 '14 at 22:20

Juliano Alves

2,006
4
35
37

answered Mar 27 '14 at 22:00

Seyacat

21
2

1

It would be more helpful to actually show the old code and then the new code with the proper edits in it. – Kevin Mar 27 '14 at 22:24

score 1 · Answer 8 · answered Jun 28 '15 at 10:52

1

You Can Remove Input Slider As Below :

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


    .ui-slider-track {
        margin: 0 15px 0 15px !important;
    }

answered Jun 28 '15 at 10:52

Novin.Kh

129
2
6

hiding the slider input box in jquery

8 Answers8

Linked