Hello everyone again! I rewrote the code for the slider, but now I can't figure out how to make a gradient between colors # e8e8e8 and # 445994 when moving the slider. Can anyone suggest what to add to JS? :) And the snag is that the initial color from the beginning of the strip should be # e8e8e8, and the final color at the end of the strip is # 445994 . Those. in the middle of the strip there should be a color between them. # 8986c3 is about this.
I already broke my head with different variations, but it does not work as it should.
Oh yeah, how to make the slider go slightly to the left of the strip at the beginning and a little to the right at the end? (so that the tip of the drop type ends at the end of the slider bar)
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> 
