input=range remove textfield

Question

The HTML code for my input range looks like this:

<input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d">

it looked like this:

enter image description here

based on this answer I added following css:

.sliderNoTextbox.ui-slider-input {
    display : none !important;
}

now it looks like this:

enter image description here

Where before was a textbox, now is a blank space. I just can't figure out how to get rid of that space.. can anyone help me out?

The blank space only appears on Android devices

UPDATE

I have created a completely empty page, with only the slider, still the blank space appears. It does not seem to depend on any other elements:

<body>
    <input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d">
</body>

Using jQM 1.3.2 with jQuery 1.8.3

This space comes from somewhere else. Check using dev tools. It is currently impossible to help you more. — A. Wolff, Mar 12 '14 at 09:50
Because the slider is probably an ':after' element. You will have to use a negative margin to get rid of the whitespace. Although like @anurupr said, a jsfiddle would be nice. — Alex van den Hoogen, Mar 12 '14 at 09:52
I have created a jsFiddle, but it works on browsers.. so, it works. — Daniel, Mar 12 '14 at 10:08
@Omar the `.sliderNoTextbox` is only to make it more specific and not having it change all the sliders, it works in the same way if I remove it. — Daniel, Mar 12 '14 at 10:11

score 0 · Accepted Answer · answered Mar 12 '14 at 10:01

Try this:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>.ui-slider-input {
    display : none !important;
}
</style>
<div data-role="page">
    <div data-role="content">
        <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" />
    </div>
</div>

Ref link: http://jsfiddle.net/EWQ6n/2/

input=range remove textfield

1 Answers1