javascript - Jquery Range Slider - 低填充部分 - 如何填充背景色

Question

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

我已经尝试了可以​​在网络上找到的所有技术。我读到 Internet Explorer 支持此类代码，但大多数现代浏览器需要 hack 才能实现这种效果。我尝试了一种渐变技术，但它对我来说似乎有点太老套了。没有我尝试坚持。

有人知道填充下方填充部分的简单方法吗？一定有办法-

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 track 选项。但是，它们只能在兼容的浏览器上运行。