Как добавить разные заголовки (Hover-Text) для каждого значения элемента слайдера без использования JQuery?

Question

Я искал в Интернете, как создать отдельное сообщение при наведении курсора для каждого значения ползунка, но я не смог найти то, что не использует JQuery.

<!-- Slider Input -->
<input type="range" id="mySlider" value="0" min="0" max="10"
  style="width:80%;" title="This should change every value."/>

Что я пытаюсь сделать, это когда пользователь наводит курсор на ползунок (пуля);сообщение при наведении курсора отображает что-то простое.См. Примеры ниже:

Пример 1: значение = 1 -> Hover Msg: "Этап 1 ..."

Пример 2: значение = 2 -> Hover Msg: "Этап 2 ... "

и т. Д.

Answer 1

Вы можете назначить прослушиватель события событию изменения, а затем обновить атрибут title ползунка, например так:

var slider = document.getElementById("mySlider");

function onSliderChange() {
  slider.title = "Stage " + slider.value;
}

slider.addEventListener("change", onSliderChange);

onSliderChange();

<input type="range" id="mySlider" value="0" min="0" max="10" style="width:80%;"/>

Атрибут title является подсказкой или текстом подсказки для элемента, и я запускаю обработчик события изменения один раз в начале, поэтому он инициализируетзаголовок с «Стадия 0»

Answer 2

Неправильно понял, что вы имели в виду под слайдером, попробуйте это, если вы хотите простой javascript:

let input = Document.getElementbyId("mySlider");
input.addEventListener("mouse up", (e) => {
    if(e.currentTarget.value === 1){
        console.log("Hover Msg: Stage 1 ...") 
        // or you could display message in an elsewhere tag
    }
    else if(e.currentTarget.value === 2){
        console.log("Hover Msg: Stage 2 ...")
    }