javascript - JQueryUI slider - 3 个标签

Question

我正在做一个元素，要求用户从 -10<=>10 中选择一个隐藏值

我喜欢 JQueryUI 小部件的外观和功能，如果......我可以放置 3 个标签，则增量 slider 会起作用。

选项A......................中性......................选项B

它们是一个结构良好的 JSFiddle，每个增量点都有格式化的数字或刻度。我真的很希望它有如上图所示的 3。

http://jsfiddle.net/9y501okz/

$("#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" ).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