Тип ввода диапазон css - цвет фона

Question

Я хочу настроить <input type="range"> с помощью css. В результате я хочу достичь такой:

, но мой следующий код дает мне это

это мой код:

input[type='range'] { 
    border-radius: 5px; 
    height: 6px; 
    vertical-align: middle; 
    -webkit-appearance: none; 
} 
input[type="range"]::-moz-focus-inner:focus{ 
    border : 0px; 
    outline: 0; 
} 
input[type='range']::-moz-range-track { 
    border-radius: 5px; 
    background-color: #E71D49; 
    height: 6px; 
    border: 1px dotted transparent !important; 
} 
input[type='range']::-webkit-slider-thumb { 
    border-radius: 20px; 
    background-color: #FFF; 
    border:none; 
    box-shadow: 0 5px #000; 
    height: 5px; 
    width: 5px; 
} 
input[type='range']::-moz-range-thumb { 
    border-radius: 20px; 
    background-color: #fff; 
    border:none; 
    height: 20px; 
    box-shadow: 3px 2px 3px #000; 
    width: 20px; 
} 

Можно ли разделить ползунок на «активный» и «неактивный»?

Заранее спасибо Дарио

Answer 1

Я не считаю, что это возможно с диапазоном по умолчанию HTML. Если возможно, вы должны заглянуть в плагины, которые настраиваются, я уверен, что есть варианты, которые имеют именно то, что вы ищете.

Answer 2

Надежда пример поможет вам

Код: example

var inputs = document.getElementsByTagName('input'); 
inputs = Array.splice(inputs, 0); 
inputs.forEach(function (item) { 
if (item.type === 'range') { 
    item.onchange = function() { 
     value = (item.value - item.min)/(item.max - item.min) 
     item.style.backgroundImage = [ 
      '-webkit-gradient(', 
       'linear, ', 
       'left top, ', 
       'right top, ', 
       'color-stop(' + value + ', blue), ', 
       'color-stop(' + value + ', red)', 
      ')' 
     ].join(''); 
    }; 
} 
});