Question

我正在使用此脚本更改彩色滑块。但我想添加文本/工具提示，进度拖动如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>

Answer 2

Working Demo

JSFiddle Tooltip with same color

Custom Tooltip 
--------------


    <p>A Colored jQuery UI Slider</p>
    <div id="coloredSlider">
        <div class="tooltipWrapper">
            <span class="tooltip"></span>
        </div>
    </div>

    <div style="float:left;clear::both">
    This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph
    This is a sample paragraph This is a sample paragraph This is a sample paragraph This is a sample paragraph
    </div>

ToolTip with backgroundChange and at location

Script
------

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 );

    $('.tooltip').text(coloredSlider).css({'background':myColor,'display':'block','left':Math.round($( ".ui-slider-handle").position().left-15)});
    //document.styleSheets[0].addRule('.tooltip::before,.tooltip::after', 'border-bottom-color:"'+myColor+'"', 0); 
    //document.styleSheets[0].rules[0].style.borderBottomColor= myColor+"!important";

    $( "#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
      });
});


  [1]: https://jsfiddle.net/nadeemmnn2007/vbw6d911/

使用进度滑块更改工具提示

2 个答案: