Как запретить перетаскивать ползунок в type="range"

Question

Помогите пожалуйста, необходимо запретить изменять значения слайдера пользователю, disabled="true" не подходит тк слайдер становиться бледным."

    $(element).html("<div class=\"main\">\n" +
        "  <input\n" +
        "      type=\"range\"\n" +
        "      class=\"slider\"\n" +
        "      name=\"participants\"\n" +
        "      id=\"rangeId\"\n" +
        "      min=\"1\"\n" +
        "      max=\"100\"\n" +
        "  >\n" +
        "  <span draggable='false' class=\"rangeslider__tooltip\" id =\"range-tooltip\"></span>\n" +
        "</div>");

Answer 1

Для того, чтобы запретить посетителю перетаскивать ползунок, можно перекрыть его прозрачным элементом div с такими же размерами и абсолютными координатами:

.myclass{
    position: absolute;
    width: 200px;
    height: 200px;
}

<input type=range class=myclass />
<div class=myclass></div>

Или вариант, похожий на Ваш:

#mydiv{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id=element></div>
<div id=mydiv></div>
<script>
 $(element).html("<div class=\"main\">\n" +
        "  <input\n" +
        "      type=\"range\"\n" +
        "      class=\"slider\"\n" +
        "      name=\"participants\"\n" +
        "      id=\"rangeId\"\n" +
        "      min=\"1\"\n" +
        "      max=\"100\"\n" +
        "  >\n" +
        "  <span draggable='false' class=\"rangeslider__tooltip\" id =\"range-tooltip\"></span>\n" +
        "</div>");
</script>

Теперь по поводу Вашего codepen: перепишите объявление класса myclass так:

.myclass{
    position: absolute;
    top: 30%;
    left: 35%;
    width: 500px;
    height: 200px;
}

И ползунок заблокируется.

Answer 2

Еще можно сделать вот так.

.my-class {
  pointer-events: none;
}

<input type="range" name="participants" min="5" max="51" value="20" class="my-class">

БЛОГ НА HUSL

Как запретить перетаскивать ползунок в type="range"

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