Скрыть большой палец слайдера в JavaScript

Question

Я хотел бы сделать большой палец слайдера (это даже хорошее слово для этого? Я предполагаю, что он) скрыт на короткое время, прежде чем снова показать его в javascript.По сути, идея состоит в том, чтобы не показывать его до того, как пользователи нажимают на ползунок, чтобы не смещать их ответ.

Для MWE, я думаю, что это хороший вариант.https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_rangeslider

В этом, изменив:

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

на

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   background: #4CAF50;
   cursor: pointer;
   display: none;
}

Я могу заставить палец ползунка исчезнуть.Но как бы вы сделали это в javascript?

Заранее спасибо.

Answer 1

Оказывается, вы не можете сделать это напрямую в JS.Но простой способ - использовать два разных CSS-класса и использовать JS для изменения класса ползунка.

Вот частичное решение

    /* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 25%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}




/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}


/*An other class to make the thumb of the slider invisible*/
.slider2 {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 25%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider2:hover {
    opacity: 1; /* Fully shown on mouse-over */
}




/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider2::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    visibility: hidden;
}

.slider2::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

Обратите внимание на visibility: hidden; для slider2.

Затем используйте js, чтобы изменить класс следующим образом:

document.getElementbyId("slider").className = "slider2"