Как стилизовать input range по такому принципу

#javascript #jquery #css

Не знаю как сделать


Шаг через каждые 25 пунктов (пунктир)
Разную высоту сначала и в конце полоски, получается она изменяется от 0 до 100 (бэка)
Ну и естественно надписи над этими пунктирами
Сам ползунок так стилизовать, каплей
Как сделать изменение цвета полосы путем применения JS от первого цвета до последнего?
Градиентом. Только сейчас обратил внимание, что у меня градиентом после движения ползунка,
используется сразу последний цвет и при изменении положения ползунка "наполняется"
промежутком необходимый цвет. А мне нужно чтобы ползунок сам наполнял этот промежуток
между началом и концом полосы ползунка.




$(function() {
  var r = $('input[type="range"]');
  r.on('mouseenter', function() {
    var p = r.val();
    r.on('click', function() {
      p = r.val();
      bg(p);
    });
    r.on('mousemove', function() {
      p = r.val();
      console.log(p)
      bg(p);
    });
  });

  function bg(n) {
    r.css({
      'background-image': '-webkit-linear-gradient(left ,#ceb8ee 0%,#8a86c3 ' + n
+ '%,#e8e8e8 ' + n + '%, #e8e8e8 100%)'
    });
  }
});
input[type="range"] {
  -webkit-appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 14px;
  background-image: -webkit-linear-gradient(left, #e8e8e8 0%, #e8e8e8 25%, #e8e8e8
50%, #e8e8e8 100%);
  outline: none;
  transition: .1s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 25px;
  background: @white;
  border: 1px solid @btn;
  margin-top: 4rem;
  border-radius: 50%;
  transition: .1s;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  /*   width: 16px;
height: 16px; */
  cursor: pointer;
}


  






    

Ответы

Ответ 1

$(function() {
  var r = $('input[type="range"]');
  r.on('mouseenter', function() {
    var p = r.val();
    r.on('click', function() {
      p = r.val();
      bg(p);
    });
    r.on('mousemove', function() {
      p = r.val();
      bg(p);
    });
  });

  function bg(n) {
    r.css({
      'background-image': '-webkit-linear-gradient(left ,#ceb8ee 0%,#8a86c3 ' + n
+ '%,#e8e8e8 ' + n + '%, #e8e8e8 100%)'
    });
  }
});
input[type="range"] {
  -webkit-appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 14px;
  background-image: -webkit-linear-gradient(left, #e8e8e8 0%, #e8e8e8 25%, #e8e8e8
50%, #e8e8e8 100%);
  outline: none;
  transition: .1s;
}

#slider {
  width: 600px;
  position: relative;
}

#slider .triangle {
    position: absolute;
    pointer-events: none;
    display: block;
    top: 2px;
    left: 0px;
    right: 0px;
    border-bottom: 14px solid transparent;
    border-left: 600px solid #ffffff;
}


#slider .steps {
    position: absolute;
    top: 0px;
    width: 100%;
}

.steps .step{
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px dotted #999999;
    width: calc(100%/4);
    height: 16px;
    z-index: 100;
}



input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: white;
  border: 1px solid #8a86c3;
  margin-top: 4rem;
  border-radius: 100% 0% 100% 100%;
  transition: .1s;
  transform: rotate(-40deg);
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  background: #8a86c3;
  border: 1px solid #8a86c3;
  cursor: pointer;
}


  
  

  




Ответ 2

Могу помочь только с 1 и 2 пунктом. Первое это атрибут step а второе это css clip-path.



$(function() {
  var r = $('input[type="range"]');
  r.on('mouseenter', function() {
    var p = r.val();
    r.on('click', function() {
      p = r.val();
      bg(p);
    });
    r.on('mousemove', function() {
      p = r.val();
      bg(p);
    });
  });

  function bg(n) {
    r.css({
      'background-image': '-webkit-linear-gradient(left ,#ceb8ee 0%,#8a86c3 ' + n
+ '%,#e8e8e8 ' + n + '%, #e8e8e8 100%)'
    });
  }
});
input[type="range"] {
  -webkit-appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 14px;
  background-image: -webkit-linear-gradient(left, #e8e8e8 0%, #e8e8e8 25%, #e8e8e8
50%, #e8e8e8 100%);
  outline: none;
  transition: .1s;
 -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 88%);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 88%);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 25px;
  background: @white;
  border: 1px solid @btn;
  margin-top: 4rem;
  border-radius: 50%;
  transition: .1s;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  /*   width: 16px;
height: 16px; */
  cursor: pointer;
}