句柄前 jQuery UI 滑块的样式

Question

我有一个创建滑块控件的需求，如下所示：

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

这是我现在的样子

这是生成此滑块的渲染 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>

我猜我应该使用渲染的类之一来显示蓝色条，但不确定如何实现。

Answer 1

您可以将 <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>

Answer 2

我已经更新了 color picker demo 使范围条看起来像你所拥有的，使用下面的 CSS:

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

句柄前 jQuery UI 滑块的样式

Styling for jQuery UI Slider before handle

jquery

html

css

jquery-ui

jquery-ui-slider