jQuery范围滑块-低填充部分-如何用背景色填充

Question

我创建了此范围滑块，我想用类似于示例图片中蓝色的绿色填充滑块的“下部”部分。

我尝试了所有可以在网络上找到的技术。 我读到Internet Explorer支持这种事情的代码，但是大多数现代浏览器都需要破解才能实现这种效果。 我尝试了渐变技术，但对我来说似乎有点太过分了。 我什么都不会尝试。

有人知道填充下部填充部分的简单方法吗？ 必须有一种方法-

https://codepen.io/stinkytofu3311/pen/GmKxoW

  var sizeRange = ["11x17 - Starting Price <span>- $19.99</span>", // Store string inside of an Array "24x36 - Starting Price <span>- $29.99</span>", "70x90 - Starting Price <span>- $39.99</span>", "120x50 - Starting Price <span>- $49.99</span>", "67x18 - Starting Price <span>- $59.99</span>", "19x30 - Starting Price <span>- $69.99</span>"] var imageUrl = new Array(); // Store images inside of an Array imageUrl[0] = 'http://svgshare.com/i/1Ak.svg'; imageUrl[1] = 'http://svgshare.com/i/1AQ.svg'; imageUrl[2] = 'http://svgshare.com/i/1Bb.svg'; imageUrl[3] = 'http://svgshare.com/i/1Am.svg'; imageUrl[4] = 'http://svgshare.com/i/1CG.svg'; imageUrl[5] = 'http://svgshare.com/i/1By.svg'; $('#sliderPrice').html( sizeRange[0] ); $(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes) var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL]) $('#sliderStatus').html( $(this).val() ); $('#sliderPrice').html( sizeRange[v] ); $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image }); // ::::: Range Slider Thumb ::::: // $("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider $(this).removeClass().addClass("thumb-down");//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color) $(this).addClass("hover-ring");//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color) }); $("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider $(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green $(this).addClass("hover-ring-out"); //2.2 Removes Box-Shadow }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto'); .product-range-wrapper { displat: -webkit-flex; displat:flex; -webkit-flex-direction: column; flex-direction:column; max-width:600px; margin:0px auto; /*outline: 1px solid purple;*/ } .product-range-block { display: -webkit-flex; display:flex; -webkit-flex-direction: row; flex-direction: row; width:100%; height:100%; /*outline: 1px solid red;*/ } .ref-height-block { flex-grow:3; /*background-color:red;*/ } .size-chart-block { flex-grow:9; /*background-color:green;*/ } .product-range-block img { width:90%; /*outline: 1px solid blue;*/ } #img { width: 100% !important; } /* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */ .range-slider-block { margin:0px auto; width:90%; } #range-slider { padding:40px 0px; width:100%; /*outline: 1px solid green;*/ } /* Remove Range Sliders Default Styles*/ input[type=range]{ -webkit-appearance: none; } /* Track */ input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #d7d7d7; border: none; border-radius: 6px; } input[type=range]:focus { outline: none; } /* Thumb */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 30px; width: 30px; border-radius: 50%; background: #46947F; margin-top: -9px; transition: box-shadow 0.5s; } input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10pt rgba(190,190,190,0.4); cursor:pointer; } /* JS Styles */ /* Changes Thumb color to darker green when mousedownn */ input[type=range].thumb-down::-webkit-slider-thumb { background:#316557; } /* Changes Thumb color back to light green when mouseup */ input[type=range].thumb-up::-webkit-slider-thumb { background:#46947F; } /* Changes Ring color Green */ input[type=range].hover-ring::-webkit-slider-thumb { box-shadow: 0 0 0 6pt rgba(70,148,127,0.46); cursor:pointer; } input[type=range].hover-ring-out::-webkit-slider-thumb { box-shadow: 0 0 0 0pt rgba(0,0,0,0); cursor:pointer; } /* Input Value Styles */ #slider_count { margin:0px auto; width:100%; padding:0px 20px; text-align:center; } #sliderPrice { font-family: 'Roboto', sans-serif; font-size:22px; font-weight:600; } #sliderPrice span { font-weight:600; color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div class="product-range-wrapper"> <div class="product-range-block"> <div class="ref-height-block"> <img src="http://svgshare.com/i/1Ba.svg" alt="Product Height Refrence" height="" width=""> </div> <div class="size-chart-block"> <img src="http://svgshare.com/i/1Ak.svg" style='' id='img'/> </div> </div> <div id="slider_count"><span id="sliderPrice">0</span></div> <div class="range-slider-block"> <input type="range" id="range-slider" value="0.0" min="0" max="5" step="1" /> </div> </div> <div id="slider_count">Slider Value = <span id="sliderStatus">0</span></div> <br/> 

Answer 1

我设法在这里获得一个工作版本： http : //codepen.io/anon/pen/LyxYVY

var sheet = document.createElement('style'),
$rangeInput = $('.range'),
prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

document.body.appendChild(sheet);

var getTrackStyle = function (el) {
    var curVal = el.value,
        style = '';

    for (var i = 0; i < prefs.length; i++) {
        style += '.range::-' + prefs[i] + '{background: linear-gradient(to right, #34495e 0%, #34495e ' + curVal*20 + '%, #fff ' + curVal + '%, #fff 100%)}';
    }

    return style;
}

$rangeInput.on('input', function () {
    sheet.textContent = getTrackStyle(this);
});

您可以使用webkit，firefox和ms跟踪选项。 但是，它们只能在兼容的浏览器上使用。