Adding a reference point to a Jquery Slider

Question

I have created a data entry web application using asp mvc where the user can submit a record of their wellbeing. The data is saved to a SQL database and everything is working fine however, I would like to add a fixed reference point on the jQuery slider itself to show the user their most recent score. Maybe in the form of an additional fixed handle at the corresponding value...however I'm very new to javascript and have tried and failed so far.

Here is a screen shot of my sliders

The numbers at the bottom show the values for the previous entry

I have posted my JS code for the sliders below. Any help would be much appreciated.

$(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

so it seems like you need to make specific pips visible. Just for information; the slider always has values, but the css hides them. So we just need to make the correct pips visible.

The steps are;

1. figure out the correct values (suggest to put them as html-data)
2. add a cssClass to those values
3. use css to display the correct pips (style accordingly)

Firstly, I've amended your JS a little so that you're using the float plugin for the pips to display the values on the slider handles. It'll be a little more robust than your solution. $(".slider").slider("float"); You can read about it here; https://simeydotme.github.io/jQuery-ui-Slider-Pips/#options-float

the final js code is;

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

  });

});

and then there's a little bit of css to apply;

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

the fully, working code, is viewable here; https://jsfiddle.net/vzw53dge/