jquery範圍滑塊 - 低填充部分 - 如何填充背景顏色

我創建了此範圍滑塊，並且我想用類似於示例圖片中的藍色的綠色填充滑塊的「下部」部分。jquery範圍滑塊 - 低填充部分 - 如何填充背景顏色

我已經嘗試了所有可以在網上找到的技術。我讀過Internet Explorer支持這種事情的代碼，但大多數現代瀏覽器都需要黑客才能實現這種效果。我嘗試了一種漸變技術，但對我來說似乎有些過於黑客。沒有什麼我嘗試堅持。

有沒有人知道一個簡單的方法來填充較低的填充部分？必須有一個way-

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/>

來源

2017-04-26 StinkyTofu

我設法弄到這裏工作版本：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跟蹤選項。但是，他們只能在兼容的瀏覽器上工作。

來源

2017-04-26 15:37:31 Deckerz

使用漸變來做它是一個不錯的主意！ – vlk

我無法讓我的範圍滑塊工作。你可以看一下嗎？ https://codepen.io/stinkytofu3311/pen/RVZReX – StinkyTofu

jquery範圍滑塊 - 低填充部分 - 如何填充背景顏色

回答

相關問題