Стилизация ползунка Range до манипулятора.

466

24 ноября 2016, 09:51

Есть такая задача, стилизовать ползунок 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, всё это дело сразу же ведет в разные стороны.

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

Answer 1

Вам необходимо соблюдать пропорции и 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">

Answer 2

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

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+'