Question

我已经使用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);

            }

        );
    }

);

Answer 1

所以看来您需要使特定的点可见。仅供参考；滑块始终具有值，但是css隐藏它们。因此，我们只需要显示正确的点即可。

步骤是；

找出正确的值（建议将其作为html数据放置）
将cssClass添加到这些值
使用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/

将参考点添加到Jquery Slider

1 个答案: