Событие JS ползунок диапазона ввода

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

HTML

<input id = "param1" type = "range" min = "0" max = "1" step = "0.1" class = "slider-color">

Jquery

$('.slider-color::-webkit-slider-thumb').hover(function(){
    $('.slider-color::-webkit-slider-runnable-track').css('height','11px');
});

Пожалуйста помоги. Выше не работает

javascript jquery css html

06.03.2019 07:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

248

Ответы 1

Я не уверен, сможете ли вы поймать наведение на slider-thumb, но вот идея на случай, если вы хотите навести курсор на все слайдеры, где вы можете полагаться на переменную CSS для изменения некоторых свойств.

.slider-color:hover {
  --c:red;
  --h:40px;
}
.slider-color::-webkit-slider-runnable-track {
  background:var(--c,transparent);
  height:var(--h,initial);
}

<input id = "param1" type = "range" min = "0" max = "1" step = "0.1" class = "slider-color">

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

— 06.03.2019 09:33

@RejoanulAlam Да, как я уже сказал, я не думаю, что вы можете поймать наведение на большой палец, поэтому я предложил решение с наведением на весь слайдер.

— 06.03.2019 09:48

06.03.2019 09:13