скрытие поля ввода слайдера в jQuery

Question

Я использую jQuery Mobile 1.0.

У меня есть этот html-код.

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

Его рендеринга, как это:

Но я хочу, чтобы удалить окрашенные в красный цвет часть. Я хочу показать только часть слайдера.

Как это можно сделать?

Answer 1

Если вы просто хотите, чтобы избавиться от стрелки вверх/вниз, вы можете обернуть вход в элемент с заданной ширины/высоты и overflow : hidden:

$(".ui-slider-input").wrap($('<div />').css({ 
    position : 'relative', 
    display : 'inline-block', 
    height : '36px', 
    width : '45px', 
    overflow : 'hidden' 
})); 

Или, как сказал Фредерик Hamidi, вы можете просто скрыть элемент все вместе и только ползунок будет виден.

Вот демо выше код: http://jsfiddle.net/EWQ6n/1/

Также вы можете скрыть элемент ввода с помощью CSS (что хорошо, потому что у вас нет времени на выполнение CSS, как вы делаете с JS) :

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

Вот демо с помощью CSS: http://jsfiddle.net/EWQ6n/2/

Update

Вместо того, чтобы использовать ключевое слово !important, вы также можете создать более конкретное правило CSS, чтобы оно использовалось в классах jQuery Mobile. Примером может быть:

.ui-mobile .ui-page .ui-slider-input, 
.ui-mobile .ui-dialog .ui-slider-input { 
    display : none; 
} 

Answer 2

Вы можете скрыть входной контроль вручную:

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

Answer 3

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

Answer 4

Если вы только хотите, чтобы избавиться от стрелка вверх/вниз используйте 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

Когда вы сделаете это, используя CSS подход, вы можете нарушить вход поданный другим. Поэтому добавление класса class="ui-hidden-accessible" к вводу, чтобы скрыть его.

Удалить class="ui-hidden-accessible" от label.

Ваш подход правильный. Но вам нужно добавить class="ui-hidden-accessible" в input не на label.

Ваш код должен выглядеть так:

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

Проверить это SAMPLE DEMO

Answer 6

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" /> 

, но посмотрите, что anoy смещение

.ui-slider-track { 
    margin: 0 15px 0 68px; ----> change to 10 
} 

Answer 7

Я хотел сделать это, но я также хотел, чтобы пространство исчезло. Я совершил этот этот путь (я с помощью ползунка диапазона): Я добавил .no-номер в DIV

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

Примечание.

Тогда в 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 
} 

Я делаю все это как часть более серьезной проблемы, которая является то, что я пытаюсь использовать ползунок диапазона для времени вместо чисел, поэтому я заменил те элементы с заголовком, который я могу изменить с помощью функции, чтобы отобразить время.

Возможно, это не идеальный выбор, но я не видел, где можно найти место где угодно, поэтому я думал, что отправлю его здесь.

Answer 8

Вы можете удалить входную Slider как ниже:

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


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