处理之前的 jQuery UI Slider 样式

Posted 2023-05-08

【中文标题】处理之前的 jQuery UI Slider 样式

【英文标题】：Styling for jQuery UI Slider before handle

【发布时间】：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>

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

【参考方案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>