Диапазон ввода HTML скрыть большой палец

Question

Диапазон ввода HTML скрыть большой палец

0

Я получил этот диапазон ввода в своем Ionic Mobile App:

<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">

С этим CSS применяется к нему:

.custom-range input[type='range']::-webkit-slider-thumb {
    width: 20%;
    /*display: none;*/
    height: 1.6vh;
    background: rgb(255,255,255);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
    margin-top: -3px;
    border-radius: 5px;
}

В зависимости от опции я хочу скрыть большой палец, но сохранить дорожку. Если я прокомментирую display: none; оно работает. Я получаю ввод диапазона без большого пальца. Но я хочу сделать это динамически на основе взаимодействия с пользователем.

Я действительно не знаю, как взаимодействовать с вводом на CSS. Я использую angularJS и javascript, но не JQuery (я буду держать его подальше от моего проекта, насколько это возможно), поэтому я ищу чистое решение js.

Я читал это, это и это среди других решений. Я могу скрыть ввод, но не дорожку или большой палец отдельно.

Jaxedin 30 сен. 2015, в 04:48

Источник

Теги:

javascript

html

angularjs

css

1 ответ

Ещё вопросы

sirrocco · Accepted Answer · 2015-09-30T00-47-00.000Z

Поэтому я предполагаю, что.custom-range будет на родительском элементе правильно? Если это так, код может выглядеть так:

<div class='custom-range'>
  <input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
</div>

Вы можете использовать ng-class для динамического добавления класса в div.custom-range:

<div class='custom-range' ng-class="{'disabled-range':isDisabled()}">
   ....
</div>

и добавьте немного css:

.custom-range.disabled-range input[type='range']::-webkit-slider-thumb {
    display: none;
}

Не проверял это... но я надеюсь, что это достаточно ясно.

Вчера я работал так много часов, что не видел очевидного. Мне никогда не приходило в голову, что нг-класс был решением. Спасибо!