JQueryUI滑块-3个标签

Question

I am working on a project that requires the user to select a hidden value from -10<=>10

I like the look and function of the JQueryUI widgets, and the increment slider would work if.... I can place 3 labels.

OptionA..................Neutral.....................OptionB

Their is a well-formed JSFiddle that has formatted numbers or ticks for each increment spot. I would really just like it to have the 3 as illustrated above.

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;
}

Thank you.

Answer 1

Your example is easily edited to achieve your desired results.

Change your slider initialization to use the following options:

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

Your labels can be edited by adding a simple switch inside your loop:

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);

}

Example here