Вопрос: Размещение значения внутри большого пальца диапазона ввода


ОБНОВИТЬ:   ниже.

У меня есть слайдер ( <input type='range'../> ), и у меня есть значение внутри большого пальца. Вот грубое представление:

        ______
_______/      \______
|______: [42] :______|
       \______/

Проблема заключается в том, что большой палец не поддерживает контент, поэтому я помещаю значение в <div><span class='noselect'>[42]</span></div> и вычислить некоторые left: ?px с javascript, чтобы переместить div в соответствии с большим пальцем.

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

Я добавил css для предотвращения выбора текста:

.noselect {
    -moz-user-select:-moz-none;
    -moz-user-select:none;
    -o-user-select:none;
    -khtml-user-select:none;  
    -webkit-user-select:none; 
    -ms-user-select:none;
    user-select:none; 
    display: block;
}

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

Кроме того, я попытался перенести событие на большой палец:

$(document).on('click touchstart touchend touchmove', '.noselect', function (event) {
    var slider = $(this).parents('.slider').first();
    if (slider && slider.length > 0) {
        slider.trigger(event.type, event);
        event.stopPropagation();
        return false;
    } 
});

Вышеупомянутые js фиксируют текстовое событие, но попытка его запуска на слайдере под ним ничего не делает.

Вопрос:  как я могу сделать это значение и не мешать взаимодействию с пользователем?

Большой палец имеет стиль, подобный кругу:

input[type="range"]:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #404040;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #404040; 
    border: none; 
}

ОБНОВИТЬ

Я решил проблему на основе принятого ниже ответа. Вот как выглядит CSS:

CSS ниже делает слайдер и большой палец видимого мне вида, за исключением того, что атрибут «непрозрачность» установлен (близок) 0:

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    opacity: 0.0;
    stroke-opacity: 0.0;
    height: 26px; 
    border-radius: 0px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #808080;
    width: 54px;
    height: 54px;
    opacity: 0.02;
    stroke-opacity: 1.0;
    border-radius: 26px;
    background-color: #F0F0F0; 
    border: none;
}

Я скопировал эти стили под разными именами (sliderBackground, sliderThumb) и применил их к -s, помещенным перед:

       42        

7


источник


Ответы:


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

Это общий трюк, используемый при загрузке файлов, для замены системного стиля input[file] с другим представлением. Подробнее об этом ,


1