在处理之前为jQuery UI Slider设计样式

Question

我需要按如下方式创建滑块控件：

我正在使用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>

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

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

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

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

＆＃13;

＆＃13;

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);
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;