Изменение input [type=range] колесиком мышки

Question

Как изменять значение input [type=range] колесиком мышки при hover-e над его родительским div. При hover-e над родительском div нужно чтобы переставал работать скорлл страницы.

const snipsnapp_volume_control_slider = document.querySelector('.snipsnapp_volume_control_slider');
const snipsnapp_volume_control_progress = document.querySelector('.snipsnapp_volume_control_progress');
snipsnapp_volume_control_slider.oninput = function(){
  snipsnapp_volume_control_progress.style.width = `${this.value}%`;
};

.snipsnapp_volume_control_wrapper{
    width: 2.5em;
    height: 2.5em;
    position: relative;
    transform: rotate(-90deg);
}
.snipsnapp_volume_control_slider {
    -webkit-appearance: none;
    width: 100%;
    height: calc(2.5em - 2px);
    background-color: transparent;
    outline: none;
    cursor: pointer;
    position: inherit;
    z-index: 5;
}

.snipsnapp_volume_control_slider::-webkit-slider-thumb {
    opacity: 0;
    appearance: none;
    width: 0;
}
.snipsnapp_volume_control_progress{
    position: absolute;
    content:'';
    width: 50%;
    height: 100%;
    background-color: #dc3545;
    top: 0;
    z-index: 1;
}
.snipsnapp_volume_control_slider:before {
    content: attr(value);
    transform: rotate(90deg);
    color: #ffc107;
    position: absolute;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="snipsnapp_volume_control_wrapper btn btn-lg border border-danger p-0 me-4" title="Volume">
    <input type="range" value="50" min="0.01" max="100" step="0.01" class="snipsnapp_volume_control_slider">
    <div class="snipsnapp_volume_control_progress"></div>
</div>

Answer 1

Вот ссылка на доку по событиям мыши jQuery (ссылка)

Вот пример использования (ссылка)

Вот ссылка на плагин по работе с КОЛЁСИКОМ мышки (ссылка)

Answer 2

Можно это сделать с помощью события wheel:

const snipsnapp_volume_control_slider = document.querySelector('.snipsnapp_volume_control_slider');
const snipsnapp_volume_control_progress = document.querySelector('.snipsnapp_volume_control_progress');

const updateSliderValue = (value) => snipsnapp_volume_control_progress.style.width = `${value}%`;

snipsnapp_volume_control_slider.addEventListener('wheel', (e) => {
  e.preventDefault(); // Убираем скроллинг
  
  const change = e.deltaY > 0 ? -1 : 1;
  const currentValue = +snipsnapp_volume_control_slider.value;
  const step = 1; //+snipsnapp_volume_control_slider.step;
  
  snipsnapp_volume_control_slider.value = change * step + currentValue;
  
  updateSliderValue(snipsnapp_volume_control_slider.value);
});

snipsnapp_volume_control_slider.oninput = function() {
  updateSliderValue(this.value);
};

.snipsnapp_volume_control_wrapper{
    width: 2.5em;
    height: 2.5em;
    position: relative;
    transform: rotate(-90deg);
}
.snipsnapp_volume_control_slider {
    -webkit-appearance: none;
    width: 100%;
    height: calc(2.5em - 2px);
    background-color: transparent;
    outline: none;
    cursor: pointer;
    position: inherit;
    z-index: 5;
}

.snipsnapp_volume_control_slider::-webkit-slider-thumb {
    opacity: 0;
    appearance: none;
    width: 0;
}
.snipsnapp_volume_control_progress{
    position: absolute;
    content:'';
    width: 50%;
    height: 100%;
    background-color: #dc3545;
    top: 0;
    z-index: 1;
}
.snipsnapp_volume_control_slider:before {
    content: attr(value);
    transform: rotate(90deg);
    color: #ffc107;
    position: absolute;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="snipsnapp_volume_control_wrapper btn btn-lg border border-danger p-0 me-4" title="Volume">
    <input type="range" value="50" min="0.01" max="100" step="0.01" class="snipsnapp_volume_control_slider">
    <div class="snipsnapp_volume_control_progress"></div>
</div>

БЛОГ НА HUSL

Изменение input [type=range] колесиком мышки

Ответы (2 шт):