скрытие поля ввода ползунка в 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'
}));

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

Вот демонстрация приведенного выше кода: http://jsfiddle.net/EWQ6n/1/

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

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

Вот демонстрация с использованием CSS: http://jsfiddle.net/EWQ6n/2/

Обновление

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

.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

Если вы хотите избавиться только от стрелок вверх / вниз, используйте type="text" data-type="range"

<input type="text" data-type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />

Answer 4

Вы можете скрыть элемент управления вводом вручную:

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

Answer 5

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

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

Обратите внимание, что я добавил .no-номер в 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 6

Вы можете удалить ползунок ввода, как показано ниже:

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


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

Answer 7

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

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

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

Answer 8

Когда вы делаете это, используя 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"/>

Проверьте это ОБРАЗЕЦ ДЕМО