如何在选择颜色框时从 jquery 滑块中获取颜色

Question

$('.StandardColor').click(function() {
         
        var SelectedCol = $('.StandardColor').attr(data - color);
         
        alert(SelectedCol)
        FillScrollColor(SelectedCol)
         
      });

      function FillScrollColor(SelectedColor) {
        var rgb = hexToRgbA(SelectedColor);

        $('#range_4').css({
          'background': 'linear-gradient(to right, rgba(2, 1, 2, 1) 0%,' + rgb + '100%)'
        })
      }


      $("#range_4").slider({
        range: "min",
        max: 100,
        value: 50,
        slide: function(e, ui) {
          // How to pick the color!!
        }
      });


      function hexToRgbA(hex) {
        var c;
        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
          c = hex.substring(1).split('');
          if (c.length == 3) {
            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
          }
          c = '0x' + c.join('');
          return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',1)';
        }
        throw new Error('Bad Hex');
      }

.color {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 5.5px;
  cursor: pointer;
}

.colors_range_row {
  display: block;
  position: relative;
  margin-top: 30px;
  width: 100%;
  padding: 0px;
}

#range_4 {
  height: 12px;
  width: 95%;
  background: rgba(2, 1, 2, 1);
  background: -moz-linear-gradient(left, rgba(2, 1, 2, 1) 0%, rgba(103, 56, 111, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(2, 1, 2, 1)), color-stop(100%, rgba(103, 56, 111, 1)));
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#020102', endColorstr='#67386f', GradientType=1);
}

.clearfix {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/2.0.0/themes/base/jquery-ui.css">

<div class="row">


  <span class="color StandardColor" style="background: #000" data-color="000"></span>
  <span class="color StandardColor" style="background: #4a4a4a" data-color="4a4a4a"></span>
  <span class="color StandardColor" style="background: #417505" data-color="417505"></span>
  <span class="color StandardColor" style="background: #4a90e2" data-color="4a90e2"></span>
  <span class="color StandardColor" style="background: #8a4ebf" data-color="8a4ebf"></span>
  <span class="color StandardColor" style="background: #c0202a" data-color="c0202a"></span>
  <span class="color StandardColor" style="background: #f5a623" data-color="f5a623"></span>
  <span class="color StandardColor" style="background: #f8e71c" data-color="f8e71c"></span>
  <span class="color  StandardColor empty" data-color="ffffff"></span>
</div>

<br>
<br>
<br>
<div class="colors_range_row">
  <div id="range_4" class="range"></div>
  <div class="clearfix"></div>
</div>
<div class="clearfix"></div>

我正在努力实现以下目标

1. 用户可以从给定范围内选择任何颜色

2. 在选择（点击）颜色时，滑块会感觉到相应的颜色（从深到浅）

3. 如果用户滑动滑块，滑块下方的相应框会被相应的颜色填充

如下图所示

请指导我如何做同样的事情。

以下是我的代码。

<div class="colors_range_row">
    <div id="range_4" class="range"></div>
     <div class="clearfix"></div>
 </div>

<script>

    $('.colorBox').click(function () {          
      var SelectedCol = $('.StandardColor').attr('data-color');
     FillScrollColor(SelectedCol)
    });

    function FillScrollColor(SelectedColor) {
            var rgb = hexToRgbA(SelectedColor);

            $('#range_4').css({ 'background': 'linear-gradient(to right, rgba(2, 1, 2, 1) 0%,' + rgb + '100%)' })
        }


$("#range_4").slider({
        range: "min",
        max: 100,
        value: 50,
        slide: function(e, ui) {
            // How to pick the color!!
        }
      });

</script>

我不知道如何从滑块中选择颜色。 ??

Answer 1

已经想出了以下解决方案，

将来可能对某些人有所帮助。

• 单击颜色时，框已分别向范围滑块添加颜色阴影

  function makeTableRowColorsForIp(colors, displayType) {

         var tableRow = "<div class=\"wrapper\">";
              for (var i = colors.length - 1; i >= 0; i--) {        
  
                      if (displayType == "colors") { // make a row of colors
                          tableRow += "<div class=\"colro_set_IP\" data-ColorVal =\""+ colors[i].toString(16) +"\" style=\"background-color:" + "#" + colors[i].toString(16) + "\";></div>";
                          document.querySelector('.simple_barForIP').innerHTML = tableRow;
                      }
                       colors[i].toString(16).toUpperCase() + "</div>";
  
                  }
              tableRow += "</div>";
              return tableRow;
          }
  
  
  
  
  
  
  $(".StandardColor").click(function () {
            debugger;
            var parsedColorsArray = parseColorValues($("#hexValOfColorSelectedIP").val());
            if (parsedColorsArray !== null) {                   var colorDisplayRows = []; colors to display
                var tableRowCounter = 0;
  
  
                for (var i = 0; i < parsedColorsArray.length; i++) { 
                    var calculatedShades = calculateShades(parsedColorsArray[i]);
                    colorDisplayRows[tableRowCounter] = makeTableRowColorsForIp(calculatedShades, "colors");
                    tableRowCounter++;
                    colorDisplayRows[tableRowCounter] = makeTableRowColorsForIp(calculatedShades, "RGBValues");
                    tableRowCounter++;
                } 
  
            }
            return false;
        });
  

var slider = new Slider('#ex1ForIP', { 格式化程序：函数（值）{ tintLenght = $('#simple_barForIP').find('.colro_set_IP').length;

var RangValue = 值；
//console.log(value.html());

    if (RangValue) {                
        var shadeColor = $('.colro_set_IP').eq(RangValue).attr('data-ColorVal');

        if (RangValue == 11) {
            $('.range-slider-IP .slider.slider-horizontal .slider-handle').css('margin-left', '-9.09091%');
        }
        else {
            $('.range-slider-IP .slider.slider-horizontal .slider-handle').css('margin-left', '0');
        }
    }
    SetBorderColor(shadeColor);
    return 'Current value: ' + value + shadeColor;
}

});