Question

这就是我要寻找的外观，其功能是可以为每个风险级别设置一个范围，但它们相互依赖，因此理想情况下它们可以相互构建。

因此，在第一行中，默认值为0.00-1.66，我需要将范围滑块从0.00到1.66设为绿色。

在MODERATE行中，默认值为1.67-2.33。

我要在HIGH行中表示的是这是一个累积设置，每个新行都建立在最后一行的基础上。

我在样式和功能方面遇到了大量问题。

这可能是一个很大的问题，而且我不擅长滑块。我一直在努力使前端设计足够工作，以使开发团队能够了解即将到来的构建。

 function refreshValues() {
 var lowSlider = 
 $("#lowSlider").slider("value");   }
       $(function () {
       $("#lowSlider").slider({
        orientation: "horizontal",
        range: "min",
        value: 1.66,
        min: 0.00,
        max: 5,
        step: 0.01,
        slide: refreshValues,
        slide: function (event, ui) {

 $("#low1").val("0.00" + " - " + ui.value);},
         change: refreshValues
            });
 $("#low1").val("0.00" + " - " + $("#lowSlider").slider("value"));
            });
                         <input type="text" id="low1" class="risk-value > 
      text-primary" readonly>                 
    <div id="lowSlider" class="addSlide"></div>




 function refreshValues() {

 var modSlider =
  $("#modSlider").slider("value"); }

 $(function () {
 $("#modSlider").slider({
    orientation: "horizontal",
    range: "min",
    value: 2.33,
    min: 1.67,
    max: 5.00,
    step: 0.01,
    slide: refreshValues,
    slide: function (event, >ui) { $("#mod1").val("1.67" + " - " +  
    ui.value);
        },
   change: refreshValues});
     $("#mod1").val("1.67" + " - >      " + ("#modSlider").slider("value"));
           });

   <input type="text" id="mod1" > 
   class="risk-value text-warning" readonly>
 <div class="progress">
  <div class="progress-bar progress-bar-primary" role="progressbar">  </div>
  <div id="modSlider" class="addSlide"></div>

具有动态颜色的滑块范围

0 个答案: