1

Здравствуйте! Столкнулся с проблемой стилизации полосы прогресса у input range

Сейчас верстка выглядит вот так:

введите сюда описание изображения

Требуется что бы до ползунка input range так же был покрашен в зеленый цвет, вот пример:

введите сюда описание изображения

Как выглядит код:

// Less

@track-color: #424242;
@thumb-color: @color-green;

@thumb-radius: 3px;
@thumb-height: 30px;
@thumb-width: 30px;
@thumb-shadow-size: 1px;
@thumb-shadow-blur: 1px;
@thumb-shadow-color: #111;
@thumb-border-width: 1px;
@thumb-border-color: white;

@track-width: 100%;
@track-height: 18px;
@track-shadow-size: 2px;
@track-shadow-blur: 2px;
@track-shadow-color: #222;
@track-border-width: 1px;
@track-border-color: black;

@track-radius: 3px;
@contrast: 5%;

.shadow(@shadow-size,@shadow-blur,@shadow-color) {
  box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten(@shadow-color,5%);
}

.track() {
  width: @track-width;
  height: @track-height;
  cursor: pointer;
  animate: 0.2s;
}

.thumb() {
  .shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);
  border: @thumb-border-width solid @thumb-border-color;
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
  background: @thumb-color;
  cursor: pointer;
}

input[type=range] {
    -webkit-appearance: none;
    margin: @thumb-height/2 0;
    width: @track-width;
    background: transparent;
    &:focus {
    outline: none;
}

  &::-webkit-slider-runnable-track {
 .track();
 .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
 background: @track-color;
 border-radius: @track-radius;
  }
 
  &::-webkit-slider-thumb {
 .thumb();
 -webkit-appearance: none;
 margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);
  }

  &:focus::-webkit-slider-runnable-track {
 background: lighten(@track-color, @contrast);
  }

  &::-moz-range-track {
 .track();
 .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
 background: @track-color;
 border-radius: @track-radius;
  }
  &::-moz-range-thumb {
 .thumb();
  }

  &::-ms-track {
 .track(); 
 background: transparent;
 border-color: transparent;
 border-width: @thumb-width 0;
 color: transparent;
  }

  &::-ms-fill-lower {
 background: darken(@track-color, @contrast);
 border-radius: @track-radius*2;
 .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  }
  &::-ms-fill-upper {
 background: @track-color;
 border-radius: @track-radius*2;
 .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  }
  &::-ms-thumb {
 .thumb();
  }
  &:focus::-ms-fill-lower {
 background: @track-color;
  }
  &:focus::-ms-fill-upper {
    background: lighten(@track-color, @contrast);
  }
}
<div class="calculate_left__ranges">
  

<label for="money">Сколько Вам необходимо?</label>
  <input id="money" type="range" min="1000" max="45000" step="1000" value="3000">    
  <label for="days">На какой срок?</label>
  <input id="days" type="range" min="3" max="30" step="1" value="10">

</div>

СПАСИБО БОЛЬШОЕ!!!

3

4 ответа 4

1

Нашел ответ на Stack Overflow:

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #434343;
  box-shadow: -80px 0 0 80px #43e5f7;
}

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}
<input type="range" value="0" min="0" max="100" step="1" />

1
  • Спасибо, бывал уже в этом вопросе. При данном методе ползунок не получиться сделать больше чем input из за overflow
    – daitona
    25 мар 2018 в 20:10
1

Этот input достаточно сложно стилизовать на css но кое что можно ... работает почти всё кроме :focus ,

В любом случае что бы это выглядело как Вы хотите обычно подменяют любой input div и стилизуют как требуется ...есть масса jQuery plugin для этих целей ,к сожалению мастера javascript не охотно делятся ибо не хотят порождать себе конкуренцию , но за то через инспектор кода можно получить большинство селекторов для стилизации.

смотрите

input[type=range] {
  -webkit-appearance: none; 
  width: 100%;
  background-color: #ccc; 
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; 
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: ;
  height: 20px;
  width: 72px;
  border-radius: 8px;
  background:lightblue;
  cursor: pointer;
  margin-top: -6px; 
  box-shadow:;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow:;
  background: lightgreen;
  border-radius: 6px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: lightgrey;
}

input[type=range]:focus::-slider-runnable-track {
  background: lightgrey;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #cccccc;
}
input[type=range]:focus::-moz-fill-upper {
  background: #cccccc;
}
input[type=range]:focus::-fill-upper {
  background: #cccccc;
}
<input type="range">

5
  • Спасибо большое!
    – daitona
    26 мар 2018 в 7:49
  • если вам ответ помог отметьте его решением... любой ответ
    – user33274
    26 мар 2018 в 7:51
  • не помогло :))))
    – daitona
    26 мар 2018 в 7:56
  • что не получилось ?
    – user33274
    26 мар 2018 в 7:57
  • Решил проблему с помощью данного метода github.com/IonDen/ion.rangeSlider
    – daitona
    26 мар 2018 в 11:11
0

.box {
  padding: 20px 40px;
  background: #eee;
}
.box-line {
  width: 350px;
  height: 10px;
  margin: 15px 0;
  background: #aeaeae;
  border-radius: 5px;
  position: relative;
}
.box-line__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  border-radius: 5px;
  width: 40%;
  background: lime;
}
.box-line__progress:after {
  content: '';
  position: absolute;
  top: -5px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
}
<div class="box">
  <div class="box-line">
    <div class="box-line__progress"></div>
  </div>
</div>

2
  • Нужен input type="range", а не div'ы:)))
    – Arthur
    25 мар 2018 в 19:57
  • Спасибо Илья! Метод неплохой но еще нужно сделать это все динамически и считать значения для калькулятора. Может быть, есть что-то с использованием input?
    – daitona
    25 мар 2018 в 19:59
0

Вариант для 1-го слайдера:

html:

<input id="volume" class="volume" type="range" min="0" max="100" value="5" />

css:

.volume{
        position: relative;
}
input[type=range] {
    -webkit-appearance: none;
    width: 100%;  
}
input[type=range]::-webkit-slider-runnable-track {
    height: 3px;
    background: gray;       
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;    
    height: 14px;
    width: 14px;
    border-radius: 14px;
    background-color: #ffb90e;
    cursor: pointer;
    margin-top: -6px;   
} 

js:

window.onload = function () {sliders();}
function sliders() {
    var tracks = ['-webkit-slider-runnable-track',];
    var thumbs = ['-webkit-slider-thumb',];
    initSliders();
    var sliderGroups = document.querySelectorAll('section[data-type=slider-group]');
    for (var i=0;i<sliderGroups.length;i+=1) {
        initSliderGroup(sliderGroups[i]);
    }
    function initSliders() {
        var sliders = document.querySelectorAll('input[type=range]');
        var testAndWK = window.getComputedStyle(sliders[0],'::-webkit-slider-thumb').background;
        for (var i=0;i<sliders.length;i+=1) {
            if (!testAndWK) {sliders[i].style.WebkitAppearance = 'slider-horizontal';}          
            // подготовка тега <style> к использованию handleSlider()           
            var st = document.createElement('style');
            st.id = 's' + sliders[i].id;
            document.head.appendChild(st);
            sliders[i].addEventListener('input',function () {handleSlider(this)},false);
            sliders[i].addEventListener('change',function () {handleSlider(this)},false);
            //sliders[i].output = sliders[i].parentNode.querySelector('output');
            var dataSpan = sliders[i].parentNode.querySelector('span');
            if (dataSpan && dataSpan.getAttribute('data-labels')) {
                sliders[i].values = [];
                var values = dataSpan.getAttribute('data-labels').split(';');
                for (var j=0;j<values.length;j+=1) {sliders[i].values.push(values[j]);}
            }           
            if (sliders[i].value*1) {handleSlider(sliders[i]);}
        }
    }
    function handleSlider(slider) { 
        // this sets the gradient for one slider to the correct color stops
        // needs a prepared тега <style> созданного initSliders()   
        var gradValue = Math.round((slider.value/slider.getAttribute('max')*1)*100);
                // здесь направление, цвет и значение прогресса
        var grad = 'linear-gradient(90deg,#ffb90e ' + gradValue + '%,#cccccc ' + (gradValue+1) + '%)';
        var rangeSelector = 'input[id='+slider.id+']::';
        var styleString = '';
        //var printedValue = (slider.values) ? slider.values[slider.value] : slider.value;
        //slider.output.innerHTML = printedValue;
        for (var j=0;j<tracks.length;j+=1) {
            styleString += rangeSelector + tracks[j] + '{background: ' + grad + ';} ';
        }
        document.getElementById('s'+slider.id).textContent = styleString;
    }
    function initSliderGroup(parent) {
        var sliders = parent.querySelectorAll('input[type=range]');
        var max = parent.querySelector('div').getAttribute('data-total')*1;
        var groupRoster = [];
        var timeout;
        for (var i=0;i<sliders.length;i+=1) {
            groupRoster.push(sliders[i]);
            sliders[i].others = [];
            sliders[i].addEventListener('input',trackChange,false);
            sliders[i].addEventListener('change',trackChange,false);
        }
        for (var i=0;i<sliders.length;i+=1) {
            for (var j=0;j<groupRoster.length;j+=1) {
                if (groupRoster[j] !== sliders[i]) {
                    sliders[i].others.push(groupRoster[j]);
                }
            }
        }   
        function trackChange () {
            var that = this;
            clearTimeout(timeout);
            timeout = setTimeout(function () {setOtherSliders(that);},100);
        }
        function setOtherSliders(slider) {
            var currentTotal = calculateTotal();
            if (currentTotal > max) {
               var excess = currentTotal - max;
               var totalFromOthers = currentTotal - (slider.value*1);
               for (var j=0;j<slider.others.length;j+=1) {
                   var newValue = Math.round(slider.others[j].value - ((slider.others[j].value/totalFromOthers)*excess));
                   slider.others[j].value = newValue;
                   handleSlider(slider.others[j]);
               }
            }
        }   
        function calculateTotal () {
            var total = 0;
            for (var i=0;i<groupRoster.length;i+=1) {total += groupRoster[i].value*1;}
            return total;
        }
    
    }
}
function $(id) {return document.getElementById(id);}

Идея, с JS, не моя но - рабочая.

Ваш ответ

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

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