将参考点添加到Jquery Slider

时间:2019-04-03 01:45:16

标签: javascript jquery asp.net-mvc

我已经使用asp mvc创建了一个数据输入Web应用程序,用户可以在其中提交健康记录。数据已保存到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);

            }

        );
    }

);

1 个答案:

答案 0 :(得分:0)

所以看来您需要使特定的点可见。仅供参考;滑块始终具有值,但是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/