Question

我正在开发一个项目，要求用户从-10＆lt; =＆gt; 10中选择隐藏值

我喜欢JQueryUI小部件的外观和功能，如果......我可以使用增量滑块。我可以放置3个标签。

OptionA ..................中性..................... OptionB

它们是一个结构良好的JSFiddle，它为每个增量点格式化了数字或刻度。我真的很想让它如上图所示。

$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
    .each(function () {
        //
        // Add labels to slider whose values 
        // are specified by min, max and whose
        // step is set to 1
        //
        // Get the options for this slider
        var opt = $(this).data().uiSlider.options;
        // Get the number of possible values
        var vals = opt.max - opt.min;
        // Space out values
        for (var i = 0; i <= vals; i++) {
            var el = $('<label>' + (i + 1) + '</label>').css('left', (i / vals * 100) + '%');
            $("#slider").append(el);
        }
    });

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -10px;
    text-align: center;
    margin-top: 20px;
}

/* below is not necessary, just for style */
#slider {
    width: 50%;
    margin: 2em auto;
}

谢谢。

Answer 1

您的示例很容易编辑，以达到您想要的效果。

更改滑块初始化以使用以下选项：

$( "#slider" ).slider({
    value: 2,
    min: 1,
    max: 3,
    step: 1
})

您可以通过在循环中添加一个简单的开关来编辑您的标签：

for (var i = 0; i <= vals; i++) {
  var text = "";
  switch (i) {
      case 0:
          text = "OptionA";
          break;
      case 1:
          text = "Neutral";
          break;
      case 2:
          text = "OptionB";
          break;
  }
  var el = $('<label>'+text+'</label>').css('left',(i/vals*100)+'%');

  $( "#slider" ).append(el);

}

示例here

JQueryUI Slider - 3个标签

1 个答案: