处理之前的 jQuery UI Slider 样式答案

【问题标题】：Styling for jQuery UI Slider before handle处理之前的 jQuery UI Slider 样式
【发布时间】：2016-11-03 16:05:54
【问题描述】：

我有一个要求创建一个滑块控件如下：

我正在使用 jQuery UI Slider 来实现这一点，并让它工作到我不确定如何设置句柄前蓝色条的样式。

这就是我现在的样子

这是生成此滑块的渲染 HTML：

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
  <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 45.4545%;"></span>
</div>

我猜我应该使用其中一个渲染类来显示蓝条，但不知道如何实现。

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-slider

【解决方案1】：

我已使用以下 CSS 更新了 color picker demo 以使范围栏看起来像您所拥有的：

.ui-slider-range {
  height: 2px !important;
  top: 6px !important;
  margin-left: 2px;
}

function hexFromRGB(r, g, b) {
  var hex = [
    r.toString(16),
    g.toString(16),
    b.toString(16)
  ];
  $.each(hex, function(nr, val) {
    if (val.length === 1) {
      hex[nr] = "0" + val;
    }
  });
  return hex.join("").toUpperCase();
}

function refreshSwatch() {
  var red = $("#red").slider("value"),
    green = $("#green").slider("value"),
    blue = $("#blue").slider("value"),
    hex = hexFromRGB(red, green, blue);
  $("#swatch").css("background-color", "#" + hex);
}
$(function() {
  $("#red, #green, #blue").slider({
    orientation: "horizontal",
    range: "min",
    max: 255,
    value: 127,
    slide: refreshSwatch,
    change: refreshSwatch
  });
  $("#red").slider("value", 255);
  $("#green").slider("value", 140);
  $("#blue").slider("value", 60);
});

#red,
#green,
#blue {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}
#swatch {
  width: 120px;
  height: 100px;
  margin-top: 18px;
  margin-left: 350px;
  background-image: none;
}
#red .ui-slider-range {
  background: #ef2929;
}
#red .ui-slider-handle {
  border-color: #ef2929;
}
#green .ui-slider-range {
  background: #8ae234;
}
#green .ui-slider-handle {
  border-color: #8ae234;
}
#blue .ui-slider-range {
  background: #729fcf;
}
#blue .ui-slider-handle {
  border-color: #729fcf;
}
.ui-slider-range {
  height: 2px !important;
  top: 6px !important;
  margin-left: 2px;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  Simple Colorpicker
</p>

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>

<div id="swatch" class="ui-widget-content ui-corner-all"></div>

【讨论】：

刚刚意识到我需要的重要部分是range: "min"

【解决方案2】：

您可以将<div> 元素与float: left; background-color: blue; 一起使用，并使用JavasSript 设置此元素的宽度。该元素的宽度是滑块中绿点的位置！

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div style="float: left; background-color: blue; width: 45.4545%; height: 2px;"></div>

    <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 45.4545%;"></span>
</div>

【讨论】：