0

Есть такая задача, стилизовать ползунок range. Выделить цветом выбранный участок поля и другим цветом остаток. Перелопатил всю сеть, возможно плохо и мои познания в данном не велики. Как оказалось задача это не типичная, кака я понял. Нашел неплохое решение, вот пример: Ссылка на пример

HTML

<input type="range" min="0" max="100" step="1" value="50">

CSS

input[type="range"]{
      -webkit-appearance: none;
      border-radius:2px;
      width:200px;
      height:3px;
      background-image:-webkit-linear-gradient(left ,#f22 0%,#f22 50%,#fff 50%, #fff 100%);
      box-shadow:inset #ebb 0 0 5px;
      outline : none;
      transition:.1s;
    }
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance: none;
      width:10px;
      height:10px;
      background:#f22;
      border-radius:50%;
      transition:.1s;
    }

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

Скрипт
$(function(){
      var r = $('input');
      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 ,#f22 0%,#f22 '+n+'%,#fff '+n+'%, #fff 100%)'
          });
      }
    });

Все было бы прекрасно, если бе не одно НО. Как только меняешь максимально значение отличное от 100, всё это дело сразу же ведет в разные стороны.

Очень надеюсь на вашу помощь, может кто сталкивался с данным вопросом.

2 ответа 2

2

Вам необходимо соблюдать пропорции и js и css, т.е. когда вы изменяете max в input, надо также изменять в css:

background-image:-webkit-linear-gradient(left ,#f22 0%,#f22 50%,#fff 50%, #fff 100%);    

-там где 50%(пропорционально)
и в js:

 function bg(n){
              r.css({
                'background-image':'-webkit-linear-gradient(left ,#f22 0%,#f22 '+n+'%,#fff '+n+'%, #fff 100%)'
              });
          }    
  • там где n (пропорционально)

к примеру, если изменить параметр max на 400:

$(function() {
  var r = $('input');
  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 ,#f22 0%,#f22 ' + n / 4 + '%,#fff ' + n / 4 + '%, #fff 100%)'
    });
  }
});
input[type="range"] {
  -webkit-appearance: none;
  border-radius: 2px;
  width: 200px;
  height: 3px;
  background-image: -webkit-linear-gradient(left, #f22 0%, #f22 15%, #fff 15%, #fff 100%);
  box-shadow: inset #ebb 0 0 5px;
  outline: none;
  transition: .1s;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: #f22;
  border-radius: 50%;
  transition: .1s;
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active {
  width: 16px;
  height: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="400" step="1" value="50">

1

За изменение цвета отвечает вот этот скрипт:

function bg(n){
r.css({
'background-image':'-webkit-linear-gradient(left ,#f22 0%,#f22 '+n+'%,#fff '+n+'%, #fff 100%)'
          });

Если Вы внимательно на него посмотрите, то увидите, что параметр n в нём предполагает соответствие процентам. Когда у вас range от 0 до 100, то 1 пункт равен одному проценту, и всё работает Но как только вы меняете, например, на 200, то n - это уже в 2 раза больше процентов. А если 50, то в два раза меньше.

То есть надо тогда в скрипте писать '+n/2+' или '+n*2+'

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.