javascript - 使用进度 slider 更改工具提示

Question

我正在使用此脚本更改彩色 slider 。但我想添加带有进度拖动的文本/工具提示，例如 0% 到 100% 。我怎样才能添加这个？请你能帮我解决这个问题吗？ Fiddle

function getTheColor(colorVal) {
  var theColor = "";
  if (colorVal < 50) {
    myRed = 255;
    myGreen = parseInt(((colorVal * 2) * 255) / 100);
  } else {
    myRed = parseInt(((100 - colorVal) * 2) * 255 / 100);
    myGreen = 255;
  }
  theColor = "rgb(" + myRed + "," + myGreen + ",0)";
  return (theColor);
}

function refreshSwatch() {
  var coloredSlider = $("#coloredSlider").slider("value"),
    myColor = getTheColor(coloredSlider);

  $("#coloredSlider .ui-slider-range").css("background-color", myColor);

  $("#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default").css("background-color", myColor);
}

$(function() {
  $("#coloredSlider").slider({
    orientation: "horizontal",
    range: "min",
    max: 100,
    value: 0,
    slide: refreshSwatch,
    change: refreshSwatch
  });
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

#coloredSlider {
  float: left;
  clear: left;
  width: 600px;
  margin: 15px;
}

#coloredSlider .ui-slider-range {
  background: #ff0000;
}

#coloredSlider .ui-state-default,
.ui-widget-content .ui-state-default {
  background: none;
  background-color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider"></div>

Answer 1

这是一个技巧..

var initialValue = 0;

var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue;
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip);

}

$("#coloredSlider").slider({
    value: initialValue,
    min: 0,
    max: 100,
    step: 20,
    create: sliderTooltip,
    slide: sliderTooltip
});

body {
	font-family: Arial, Helvetica, sans-serif;
}
#coloredSlider {
	float: left;
	clear: left;
width: 600px;
	margin: 15px;
}
#coloredSlider .ui-slider-range { 
	background: #ff0000; 
}

#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default {
	background: none;
	background-color: #FFF;
}

.tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -0.6em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>A Colored jQuery UI Slider</p>

<div id="coloredSlider"></div>