如何突出显示 jquery 滑块中的选定区域？

Question

我正在使用两个 jquery 滑块，一个是单手柄，另一个是多手柄。它工作正常，但我需要以不同的颜色显示所选范围，但我无法在文档中找到相同的颜色。

我的脚本是这样的：

$(function() {
  $( "#slider-1" ).slider({
     slide: function(event, ui) {
            $(this).css({
                'background': 'rgb(107, 183, 185)'
            });
        }
  });
});

此脚本确实提供了背景颜色，但提供了完整的滑块，这不是我想要的。我只需要更改所选范围的颜色。

这是当前脚本的样子：

这就是我要找的：

对于双手柄范围选择器，这是我正在使用的来自 jquery UI 的脚本：

$(function() {
  $( "#slider-3" ).slider({
      range:true,
      min: 0,
      max: 500,
      values: [ 35, 200 ],
      slide: function( event, ui ) {
        $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
  });
  $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
      " - $" + $( "#slider-3" ).slider( "values", 1 ) );
});

这个给我的结果如下：（我这里无法更改颜色）

Answer 1

您必须手动执行此操作，使用一些自定义 CSS。

这是工作片段：

$(function() {
  $("#slider-1").slider({
    slide: changeRange
  }).append('<div class="highlight"></div>');
});

$('#slider-1').click(changeRange);

function changeRange() {
  let range = $(this).find('span').css("left");
  $(this).find('.highlight').width(range);
}

.highlight {
  background: teal;
  height: 100%;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider-1">
</div>

对于双范围滑块，您只需使用 CSS 修改一个元素。只需将此添加到您的 css :

#slider-3 .ui-widget-header {
  background: teal;
}

如何突出显示 jquery 滑块中的选定区域？

How to highlight the selected region in jquery slider?

html

javascript

css

jquery

jquery-ui