Slider на JS, изменение градиента по указанным значениям

350

27 июля 2017, 23:58

Всем снова привет! Переписал код для слайдера, но теперь не могу допереть, как сделать градиент между цветами #e8e8e8 и #445994 при движении ползунка. Кто-нибудь может подсказать, что добавить в JS ? :) Причем загвоздка в том, что начальный цвет от начала полосы должен быть #e8e8e8, а конечный цвет в конце полосы #445994. Т.е. по середине полосы должен быть цвет между ними #8986c3 примерно этот.

Я уже голову сломал с разными вариациями, но не работает как надо.

Ах да, как сделать, чтобы ползунок уходил чуть левее от полоски вначале и чуть правее в конце? (чтобы кончик типа капли заканчивался в конце полосы слайдера)

var thumb = slider.firstElementChild; 
 
    thumb.onmousedown = function(e){ 
 
        var shiftX = e.pageX - getCoords(thumb).left; 
        var sliderCoords = getCoords(slider); 
        var thumbStyle = thumb.style; 
 
        changeAtMove(e); 
        function changeAtMove(e){ 
            if((e.pageX - shiftX) < sliderCoords.left){ 
                thumbStyle.left = -10; 
            }else if((e.pageX - shiftX + thumb.offsetWidth) > sliderCoords.right){ 
                thumbStyle.left = slider.offsetWidth - thumb.offsetWidth + 'px'; 
            }else { 
                thumbStyle.left = e.pageX - sliderCoords.left - shiftX + 'px'; 
            } 
        } 
 
        document.onmousemove = function(e){ 
            changeAtMove(e); 
        } 
 
        document.onmouseup = thumb.onmouseup = function(){ 
            document.onmousemove = document.onmouseup = null; 
        } 
        return false; 
    }; 
 
    thumb.ondragstart = function(){return false;} 
 
    function getCoords(elem){ 
        var box = elem.getBoundingClientRect(); 
        return { 
            top:   box.top + pageYOffset, 
            left:  box.left + pageXOffset, 
            right: box.right + pageXOffset 
        }; 
    }

body { 
font-size: 10px; 
} 
#exp_js img { 
  display: block; 
  margin: 0 auto; 
  margin-bottom: 2.8rem; 
} 
#exp_js h4 { 
  margin-top: 2.8rem; 
  font-size: 3rem; 
  font-family: 'Roboto', sans-serif; 
  font-weight: 100; 
  text-align: center; 
  margin-bottom: 4.8rem; 
} 
#exp_js .lines { 
  position: relative; 
  float: left; 
  width: 18.5rem; 
  font-size: 1.3rem; 
  text-align: left; 
  height: 4.5rem; 
  line-height: 5rem; 
  z-index: 5; 
} 
#exp_js .lines:nth-of-type(2) { 
  width: 20rem; 
  line-height: normal; 
  z-index: 5; 
} 
#exp_js .lines:nth-of-type(3) { 
  width: 18rem; 
  font-size: 1.3rem; 
  line-height: normal; 
  z-index: 5; 
} 
#exp_js .lines:nth-of-type(4) { 
  width: 20rem; 
  float: right; 
  text-align: right; 
  z-index: 5; 
} 
#exp_js .border-lines { 
  position: relative; 
  float: left; 
  width: 18.4rem; 
  text-align: left; 
  height: 1.5rem; 
  z-index: 3; 
} 
#exp_js .border-lines:nth-of-type(5) { 
  left: 0.3rem; 
} 
#exp_js .border-lines:nth-of-type(5):before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 75%; 
  z-index: 1; 
  border-left: 1px dashed #b0b0b0; 
} 
#exp_js .border-lines:nth-of-type(6) { 
  width: 20.13rem; 
} 
#exp_js .border-lines:nth-of-type(6):before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 140%; 
  left: 0.06rem; 
  top: 65%; 
  z-index: 1; 
  border-left: 1px dashed #b0b0b0; 
} 
#exp_js .border-lines:nth-of-type(6):after { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 40%; 
  top: 180%; 
  z-index: 1; 
  border-left: 1.5px solid #fff; 
} 
#exp_js .border-lines:nth-of-type(7) { 
  width: 23rem; 
} 
#exp_js .border-lines:nth-of-type(7):before { 
  left: 0.04rem; 
} 
#exp_js .border-lines:nth-of-type(7):after { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 60%; 
  top: 160%; 
  z-index: 1; 
  border-left: 1.5px solid #fff; 
} 
#exp_js .border-lines:nth-of-type(8) { 
  width: 15.27rem; 
} 
#exp_js .border-lines:nth-of-type(8):before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 70%; 
  top: 35%; 
  left: 0%; 
  z-index: 1; 
  border-right: 1px dashed #b0b0b0; 
  border-left: none; 
} 
#exp_js .border-lines:before { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 45%; 
  left: 0%; 
  z-index: 1; 
  border-left: 1px dashed #b0b0b0; 
} 
#exp_js .slider { 
  position: relative; 
  width: 100%; 
  height: 14px; 
  background: -moz-linear-gradient(left, #e8e8e8 0%, #e8e8e8 100%); 
  background: -webkit-linear-gradient(left, #e8e8e8 0%, #e8e8e8 100%); 
  background: linear-gradient(left, #e8e8e8 0%, #e8e8e8 100%); 
  outline: none; 
  transition: .1s; 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#445994', GradientType=1); 
  top: 6.4rem; 
  z-index: 2; 
} 
#exp_js .slider:before { 
  content: ''; 
  position: absolute; 
  width: 100%; 
  height: 14px; 
  left: 0; 
  bottom: 0.4rem; 
  background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 100%); 
  background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 100%); 
  background: linear-gradient(left, #ffffff 0%, #ffffff 100%); 
  outline: none; 
  transform: rotate(-0.5deg); 
  z-index: -2; 
} 
#exp_js .thumb { 
  position: relative; 
  width: 2.2rem; 
  height: 2.2rem; 
  top: 2rem; 
  left: -10px; 
  background: #bababa; 
  background: -moz-linear-gradient(top, #bababa 0%, #bababa 100%); 
  background: -webkit-linear-gradient(top, #bababa 0%, #bababa 100%); 
  background: linear-gradient(bottom, #bababa 0%, #bababa 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#bababa', GradientType=0); 
  border-radius: 50%; 
  cursor: pointer; 
} 
#exp_js .thumb:before { 
  content: ""; 
  width: 0; 
  height: 0; 
  left: 0.101rem; 
  bottom: 1.53rem; 
  position: absolute; 
  border-bottom: 1rem solid #bababa; 
  border-left: 1rem solid transparent; 
  border-right: 1rem solid transparent; 
} 
#exp_js .thumb:after { 
  content: ""; 
  width: 2rem; 
  height: 2rem; 
  left: 1.1px; 
  bottom: 1px; 
  position: absolute; 
  background: #ffffff; 
  border-radius: 50%; 
  background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%); 
  background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%); 
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section id="exp_js"> 
	<article> 
<div id="slider" class="slider"> 
   		<div class="thumb"></div> 
      	</article> 
</section>

Answer 1

Потратив совсем немного времени получилось вот так:

var range = [ [68, 232], [89, 232], [148, 232] ];
var color = [];
range.forEach(function(v, i) {
    color[i] = Math.round( v[0] + mouseLeftPosition * (v[1] - v[0]) );
});
document.querySelector('body').style.background = "rgb(" + color.join(', ') + ")";

https://codepen.io/kirya-dev/pen/eENGGO