Question

我创建了一个范围滑块，可以直观地展示不同的横幅尺寸。我试图创建一个函数，允许输入范围拇指在触发.mousedown和.mouseup事件时改变它的背景颜色。我读到没有办法直接使用简单的Jquery选择拇指。我读到创建一个类，并且最好使用.AddClass方法。

我自己尝试过，我似乎无法弄清楚为什么拇指不会改变颜色。

你能看一下我的代码吗？

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

    //1. When user clicks their mouse down on the Range-Thumb the thumbs background-color will change to blue.
$("#range-slider").on("mousedown", function() {
    $(this).addClass("thumb-down");
});
//2. When user mouse up on the Range-Thumb the Thumbs background-color will change to Green.
$("#range-slider").on("mouseup", function() {
    $(this).addClass("thumb-up");
});

问题解决了！这是固定版本 https://codepen.io/stinkytofu3311/pen/OpKKMd

＆＃13;

var imageUrl = new 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';
       
$(document).on('input change', '#range-slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
});


// ::::: Range Slider Thumb ::::: //

//1. When user clicks their mouse down on the Range-Slider
$("#range-slider").on("mousedown", function() {
  //1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
    $(this).removeClass().addClass("thumb-down");
  //1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
    $(this).removeClass().addClass("hover-ring");
});
//2. When user mouse up on the Range-Slider the Thumbs background-color will change to Green
$("#range-slider").on("mouseup", function() {
  //2.1 Add class .thumb-up
    $(this).addClass("thumb-up");
    $(this).addClass("hover-ring-out");
});

＆＃13;

.product-range-wrapper {
  displat: -webkit-flex;
  displat:flex;
  -webkit-flex-direction: column;
  flex-direction:column;
  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:300px;
  /*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;
}
#slider_count {
  margin:0px auto;
  width:200px;
  padding:20px 20px;
  text-align:center;
  background-color:yellow;
}

/* ::::::::::::::::::::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 6pt rgba(190,190,190,0.4);
    cursor:pointer;
}

/* JS Stykes */
/* 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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 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>

＆＃13;

Answer 1

就像TypedSource所说，这是一个CSS问题。您只需要在选择器中更具体，以使您的样式覆盖以前的背景颜色。

你可以这样做：

input[type=range].thumb-down::-webkit-slider-thumb {
  background:blue;
}
input[type=range].thumb-up::-webkit-slider-thumb {
  background:green;  
}

Answer 2

只需使用：active伪选择器更改为蓝色。你甚至不需要鼠标事件。

var imageUrl = new 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';
       
$(document).on('input change', '#range-slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
});

.product-range-wrapper {
  displat: -webkit-flex;
  displat:flex;
  -webkit-flex-direction: column;
  flex-direction:column;
  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:300px;
  /*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;
}
#slider_count {
  margin:0px auto;
  width:200px;
  padding:20px 20px;
  text-align:center;
  background-color:yellow;
}
/*#range-slider {
  -webkit-appearance: none;
    width: calc(100% - (0px));
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
}*/

/* ::::::::::::::::::::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;
}
/*input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}*/
/* 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 4pt #BEBEBE;
}
input[type=range]::-webkit-slider-thumb:active {
  background:blue;  
}

/*input[type=range]:focus::-webkit-slider-thumb {
    background:#ffffff;
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="" style='' id='img'/>
    </div>
  </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>

Answer 3

这是你遇到的一个问题。在类背景颜色定义中，我将其设置为重要且运行

#range-slider {
  min-height: 100px;
  background-color: grey;
}

.thumb-down {
  background-color: red !important;
}

.thumb-up {
  background-color: blue !important;
}

看看这个工作小提琴 https://jsfiddle.net/w363w6ke/1/

使用Jquery更改输入[type = range]缩略图样式 - 不工作

3 个答案: