jquery ui 信息转换成 html答案

【问题标题】：jquery ui info into htmljquery ui 信息转换成 html
【发布时间】：2016-03-04 14:59:08
【问题描述】：

我希望将 var h 放入 360 色空间到下面的 html 中。当滑动条从 0 - 360 移动时，我希望该值替换 hsl 颜色空间中的 360-color :hsl(360, 100%, 50%)。我希望在移动滑块时让文本值改变颜色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range with fixed maximum</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 0,
      max: 360,
      value: 0,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
    var h = ui.value;
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });
  </script>
</head>
<body>

<p>
  <label for="amount">Minimum number of bedrooms:</label>
  <input type="text" id="amount" readonly style="border:0; color:hsl(360, 100%, 50%); font-weight:bold;">
</p>
<div id="slider-range-max"></div>


</body>
</html>

【问题讨论】：

标签： html jquery-ui

【解决方案1】：

您可以使用css方法更新color：

$(function() {
  $("#slider-range-max").slider({
    range: "max",
    min: 0,
    max: 360,
    value: 0,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
      $("#amount").css("color", "hsl(" + ui.value + ", 100%, 50%)");
    }
  });
  $("#amount").val($("#slider-range-max").slider("value"));
});

Fiddle Demo

【讨论】：

@wdaniel 不客气。请接受答案，以便对其他人有所帮助，谢谢。