Добавление контрольной точки в Jquery Slider

Question

Я создал веб-приложение для ввода данных, используя asp mvc, где пользователь может отправить отчет о своем благополучии. Данные сохраняются в базе данных SQL, и все работает нормально, однако я хотел бы добавить фиксированную контрольную точку на самом слайдере jQuery, чтобы показать пользователю их последние оценки. Может быть, в форме дополнительного фиксированного дескриптора с соответствующим значением ... однако я очень плохо знаком с javascript и до сих пор пытался и потерпел неудачу.

Вот скриншот моих ползунков

http://oi65.tinypic.com/2aimwe0.jpg

Цифры внизу показывают значения для предыдущей записи

Я разместил свой код JS для ползунков ниже. Любая помощь приветствуется.

$(function() {
        var handle = $("#pain-handle");

        $("#painSlider").slider({

                min: 0,
                max: 10,
                value: 0,
                animate: "fast",
                create: function() {
                    handle.text($(this).slider("value"));
                }
            }

        );

        $("#painSlider").slider().slider("pips", {
                labels: {
                    first: "No Symptoms",
                    last: "Worst Symptoms"
                }
            }

        ).on("slidechange", function(e, ui) {
                $("#pain-handle").text(ui.value);

            }

        );
    }

);

Answer 1

, поэтому кажется, что вам нужно сделать видимыми определенные пункты.Просто для информации;ползунок всегда имеет значения, но CSS скрывает их.Так что нам просто нужно сделать правильные пипсы видимыми.

Шаги:

1. выяснить правильные значения (предложите поместить их как html-данные)
2. добавить cssClass к этим значениям
3. использовать css для отображения правильных пипсов (соответственно стиль)

Во-первых, я немного исправил ваш JS, чтобы вы использовалиfloat Плагин для пипсов для отображения значений на ручках слайдера.Это будет немного надежнее, чем ваше решение.$(".slider").slider("float"); Вы можете прочитать об этом здесь;https://simeydotme.github.io/jQuery-ui-Slider-Pips/#options-float

окончательный код js:

$(function() {

  // here we assume 4 sliders all with the same css class
  var $sliders = $(".painSlider");

  $sliders.each( function(k, el) {

    var $slider = $(el);
    var previousValue = $slider.data( "previous" );

    // handle different labels for best/worst
    var firstLabel = $slider.hasClass( "bestWorst" ) ? "Best Imaginable" : "No Symptoms";
    var lastLabel = $slider.hasClass( "bestWorst" ) ? "Worst Imaginable" : "Worst Symptoms";

    $slider.slider({
      min: 0,
      max: 10,
      value: 0,
      animate: "fast"
    })

    .slider("pips", {
      labels: {
        first: firstLabel,
        last: lastLabel
      }
    })

    .slider("float")

    // add a css class to the correct values
    // so that we can style them to be shown
    .find(".ui-slider-pip")
    .eq( previousValue )
    .find( ".ui-slider-label" )
    .addClass( "previous-value" );

  });

});

, а затем нужно применить немного CSS;

/* this is the magic to show the value */
.ui-slider-label.previous-value {
  display: block;
}

/* these two styles are to show the "float"
   labels inside the handle, instead of using
   your own custom handle-text. */
.ui-slider-tip {
  visibility: visible!important;
  opacity: 1!important;
  transform: none!important;
  position: static!important;
  background: transparent!important;
  border: none!important;
  color: white!important;
  margin: auto!important;
  width: auto!important;
}
.ui-slider-tip::before,
.ui-slider-tip::after {
  display: none!important;
}

полностью,рабочий код, здесь можно посмотреть;https://jsfiddle.net/vzw53dge/