There is such a task, to style the range slider. Highlight the selected portion of the field and the remainder in another color. Shoveled the whole network, maybe bad and my knowledge of this is not great. As it turned out, the task is not typical, as I understood. Found a good solution, here is an example: Link to an example

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%)' }); } });

Everything would be fine, if not one BUT. As soon as you change the maximum value other than 100, the whole thing immediately leads in different directions.

I really hope for your help, can anyone come across this issue.

    2 answers 2

    You need to respect the proportions of both js and css, i.e. when you change max to input , you must also change to css:

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

    - there where 50% (proportionally)
    and in js:

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

    for example, if you change the max parameter to 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">

      This script is responsible for changing the color:

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

      If you look at it carefully, you will see that the parameter n in it assumes compliance with percentages. When you have a range from 0 to 100, then 1 point is equal to one percent, and everything works. But as soon as you change, for example, by 200, then n is already 2 times more percent. And if 50, then two times less.

      That is, it is necessary then in the script to write '+ n / 2 +' or '+ n * 2 +'