时间戳

首页 > 解决方案 > 向 Jquery Slider 添加参考点

javascript - 向 Jquery Slider 添加参考点

问题描述

我使用 asp mvc 创建了一个数据输入 Web 应用程序，用户可以在其中提交他们的健康记录。数据保存到 SQL 数据库中，一切正常，但是，我想在 jQuery 滑块本身上添加一个固定参考点，以向用户显示他们最近的分数。也许以相应值的附加固定句柄的形式......但是我对javascript很陌生，到目前为止已经尝试过但失败了。

这是我的滑块的屏幕截图

在此处输入图像描述

底部的数字显示上一个条目的值

我已经为下面的滑块发布了我的 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);

            }

        );
    }

);

标签： javascriptjqueryasp.net-mvc

解决方案

所以看起来你需要让特定的点子可见。仅供参考；滑块总是有值，但 css 隐藏了它们。所以我们只需要让正确的点数可见。

步骤是；

  1. 找出正确的值（建议将它们作为html-data）
  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/

推荐阅读