Jquery Ui 滑块添加自定义文本工具提示

Question

我想在每个值上拖动滑块时显示自定义工具提示。例如：总共有 5 个评分值“平均”、“低于平均水平”、“好”、“差”、“太差”。所以如果我拖动到值 4，工具提示应该显示 Bad text

这是我的代码

    <div id="slider1"></div>
    
    $(function () {
                $("#slider1").slider({
                    min: 0,
                    max: 5,
                    orientation: "horizontal",
                    range: "min",
                    animate: true,
                    stop: function (event, ui) {
                        alert(ui.value);
                    }
 if (ui.value < 1) {
    greeting = "Average";
  } else if (ui.value < 2) {
    greeting = "Below Average";
  } else {
    greeting = "Good";
  }
                });
            });

Answer 1

除了 stop 之外，JQuery 还提供了另一个在您的情况下派上用场的漂亮事件：slide。一旦将滑块的手柄拖动到新位置，它就会被触发。在它的回调处理程序中，您可以根据需要更改工具提示的文本。

工具提示本身可以是任何能够显示文本的 HTML 元素。有几种方法可以将工具提示放在滑块的手柄附近。一种简单的方法是将它附加到句柄，从而使其成为子元素。

由于工具提示应该是工具提示，您可以使用滑块的 start 和 stop 事件来相应地显示或隐藏它。

这是一个例子：

$(function() {
  function updateTooltip(value) {
    if (value < 1) {
      tooltip.text("Below Average");
    } else if (value < 2) {
      tooltip.text("Average");
    } else {
      tooltip.text("Good");
    }

    tooltip[0].style.left = parseInt(slider.find(".ui-slider-handle").width() / 2 - tooltip.width() / 2) + "px";
  }

  var tooltip = $('.tooltip');
  var slider = $('#slider1');
  tooltip.hide();

  $("#slider1").slider({
    min: 0,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    stop: function(event, ui) {
      tooltip.fadeOut('fast');
    },
    start: function(event, ui) {
      updateTooltip(ui.value);
      tooltip.fadeIn('fast');
    },
    slide: function(event, ui) {
      updateTooltip(ui.value);
    }
  }).find(".ui-slider-handle").append(tooltip);
});

.tooltip {
  position: absolute;
  top: -30px;
  color: #000000;
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #333333;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label class="tooltip"></label>
<div id="slider1" style="width:80%;margin:50px"></div>

Answer 2

我认为你必须在创建、滑动或停止时创建一个新的标签。以下解决方案使用 jquery ui slider.

的回调函数

$(function() {
  $("#slider1").slider({
    min: 1,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    create: handleSliderText,
    slide: handleSliderText,
    stop: handleSliderText
  });

  function handleSliderText(event, ui) {
    var greeting,
      colorClass,
      slider = $(event.target),
      value = parseInt(ui.value || slider.slider('value'));

    if (value == 1) {
      greeting = 'Strongly Disagree';
      colorClass = 'red';
    } else if (value == 2) {
      greeting = 'Disagree';
      colorClass = 'red';
    } else if (value == 3) {
      greeting = 'Not sure';
      colorClass = 'orange';
    } else if (value == 4) {
      greeting = 'Agree';
      colorClass = 'green';
    } else {
      greeting = 'Strongly Agree';
      colorClass = 'green';
    }

    var infoBox = getInfoBox(slider);
    infoBox.removeClass(['red','orange','green']).addClass(colorClass).text(greeting);
  }

  function getInfoBox(slider) {
    var infoBox = slider.find('.info-box');

    if (infoBox.length) {
      return infoBox;
    }

    infoBox = $('<div></div>').addClass('info-box');
    slider.find('.ui-slider-handle').html(infoBox);

    return infoBox;
  }

});

.ui-slider {
  margin: 50px 80px;
}

.ui-slider .info-box {
  position: absolute;
  margin: -12px 0 0 8px;
  padding: 5px 20px;
  background-color: #888;
  color: #fff;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
}

.ui-slider .info-box.red {
  background-color: #f00;
}

.ui-slider .info-box.orange {
  background-color: #f80;
}

.ui-slider .info-box.green {
  background-color: #0c0;
}

.ui-slider .info-box.red::before {
  border-top-color: #f00;
}

.ui-slider .info-box.orange::before {
  border-top-color: #f80;
}

.ui-slider .info-box.green::before {
  border-top-color: #0c0;
}

.ui-slider .info-box::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  border: 10px solid #888;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider1"></div>

Jquery Ui 滑块添加自定义文本工具提示

Jquery Ui slider add custom text tooltips

javascript

jquery

jquery-ui