ползунки jquery, которые меняют фон других ползунков

ProgramBox

ползунки jquery, которые меняют фон других ползунков

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#html #jquery #css

#HTML #jquery #css

Вопрос:

У меня есть 4 ползунка / диапазона для изменения цветов

1-й слайдер. холодный белый на теплый белый
2-й ползунок. диапазон цветов
3-го слайдера. устанавливается 1-м ползунком для установки 2-м ползунком
4-го ползунка. черный для установки 3-м ползунком.

Пока я могу использовать 1-й ползунок и 2-й ползунок для установки цвета фона 3-го ползунка. Проблема, с которой у меня возникли проблемы, я думаю, заключается в том, что Javascript изменяет градиент для выбора цвета, но, насколько я знаю, я иду не в ту сторону. Я не уверен, откуда я их скачал, но я использую jquery-1.12.4.

 let root = document.documentElement;
var bodyStyles = window.getComputedStyle(document.body);

$("#white").slider({
  min: 1,
  slide: function(event, ui) {
    var colorRange = []
    $.each(whitegradient, function(index, value) {
      if (ui.value <= value[0]) {
        colorRange = [index - 1, index]
        return false;
      }
    });

    //Get the two closest colors
    var firstcolor = whitegradient[colorRange[0]][1];
    var secondcolor = whitegradient[colorRange[1]][1];

    //Calculate ratio between the two closest colors
    var firstcolor_x = (whitegradient[colorRange[0]][0] / 100);
    var secondcolor_x = (whitegradient[colorRange[1]][0] / 100) - firstcolor_x;
    var slider_x = (ui.value / 100) - firstcolor_x;
    var ratio = slider_x / secondcolor_x

    //Get the color with pickHex(thx, less.js's mix function!)
    result = pickHex(secondcolor, firstcolor, ratio);
    result1 = pickHexRed(secondcolor, firstcolor, ratio);
    result2 = pickHexGreen(secondcolor, firstcolor, ratio);
    result3 = pickHexBlue(secondcolor, firstcolor, ratio);
    //        alert(result1   ','   result2   ','   result3);
    root.style.setProperty('--resultsliderwhite', result.join());
    root.style.setProperty('--resultsliderwhitered', result1.join());
    root.style.setProperty('--resultsliderwhitegreen', result2.join());
    root.style.setProperty('--resultsliderwhiteblue', result3.join());
  }
});

$("#color").slider({
  min: 1,
  slide: function(event, ui) {
    var colorRange = []
    $.each(colorgradient, function(index, value) {
      if (ui.value <= value[0]) {
        colorRange = [index - 1, index]
        return false;
      }
    });

    //Get the two closest colors
    var firstcolor = colorgradient[colorRange[0]][1];
    var secondcolor = colorgradient[colorRange[1]][1];

    //Calculate ratio between the two closest colors
    var firstcolor_x = (colorgradient[colorRange[0]][0] / 100);
    var secondcolor_x = (colorgradient[colorRange[1]][0] / 100) - firstcolor_x;
    var slider_x = (ui.value / 100) - firstcolor_x;
    var ratio = slider_x / secondcolor_x

    //Get the color with pickHex(thx, less.js's mix function!)
    result = pickHex(secondcolor, firstcolor, ratio);
    result1 = pickHexRed(secondcolor, firstcolor, ratio);
    result2 = pickHexGreen(secondcolor, firstcolor, ratio);
    result3 = pickHexBlue(secondcolor, firstcolor, ratio);
    //        alert(result1   ','   result2   ','   result3);
    root.style.setProperty('--resultslidercolorred', result1);
    root.style.setProperty('--resultslidercolorgreen', result2);
    root.style.setProperty('--resultslidercolorblue', result3);
    root.style.setProperty('--resultslidercolor', result.join());

  }
});

$("#white2color").slider({
  min: 1,
  slide: function(event, ui) {
    var colorRange = []
    $.each(white2colorgradient, function(index, value) {
      if (ui.value <= value[0]) {
        colorRange = [index - 1, index]
        return false;
      }
    });

    //Get the two closest colors
    var firstcolor = white2colorgradient[colorRange[0]][1];
    var secondcolor = white2colorgradient[colorRange[1]][1];

    //Calculate ratio between the two closest colors
    var firstcolor_x = (white2colorgradient[colorRange[0]][0] / 100);
    var secondcolor_x = (white2colorgradient[colorRange[1]][0] / 100) - firstcolor_x;
    var slider_x = (ui.value / 100) - firstcolor_x;
    var ratio = slider_x / secondcolor_x

    //Get the color with pickHex(thx, less.js's mix function!)
    result = pickHex(secondcolor, firstcolor, ratio);
    result1 = pickHexRed(secondcolor, firstcolor, ratio);
    result2 = pickHexGreen(secondcolor, firstcolor, ratio);
    result3 = pickHexBlue(secondcolor, firstcolor, ratio);
    //        alert(result1   ','   result2   ','   result3);
    root.style.setProperty('--resultsliderw2cred', result1);
    root.style.setProperty('--resultsliderw2cgreen', result2);
    root.style.setProperty('--resultsliderw2cblue', result3);
    root.style.setProperty('--resultsliderw2c', result.join());
  }
});

$("#sliderbrightness").slider({
  min: 1,
  slide: function(event, ui) {
    var colorRange = []
    $.each(brightnessgradient, function(index, value) {
      if (ui.value <= value[0]) {
        colorRange = [index - 1, index]
        return false;
      }
    });

    //Get the two closest colors
    var firstcolor = brightnessgradient[colorRange[0]][1];
    var secondcolor = brightnessgradient[colorRange[1]][1];

    //Calculate ratio between the two closest colors
    var firstcolor_x = (brightnessgradient[colorRange[0]][0] / 100);
    var secondcolor_x = (brightnessgradient[colorRange[1]][0] / 100) - firstcolor_x;
    var slider_x = (ui.value / 100) - firstcolor_x;
    var ratio = slider_x / secondcolor_x

    //Get the color with pickHex(thx, less.js's mix function!)
    result1 = pickHexRed(secondcolor, firstcolor, ratio);
    result2 = pickHexGreen(secondcolor, firstcolor, ratio);
    result3 = pickHexBlue(secondcolor, firstcolor, ratio);
    //        alert(result1   ','   result2   ','   result3);
    root.style.setProperty('--resultsliderbrightnessred', result1);
    root.style.setProperty('--resultsliderbrightnessgreen', result2);
    root.style.setProperty('--resultsliderbrightnessblue', result3);
  }
});

function pickHex(color1, color2, weight) {
  var p = weight;
  var w = p * 2 - 1;
  var w1 = (w / 1   1) / 2;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[0] * w1   color2[0] * w2),
    Math.round(color1[1] * w1   color2[1] * w2),
    Math.round(color1[2] * w1   color2[2] * w2)
  ];
  return rgb;
}

function pickHexRed(color1, color2, weight) {
  var p = weight;
  var w = p * 2 - 1;
  var w1 = (w / 1   1) / 2;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[0] * w1   color2[0] * w2)];
  return rgb;
}

function pickHexGreen(color1, color2, weight) {
  var p = weight;
  var w = p * 2 - 1;
  var w1 = (w / 1   1) / 2;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[1] * w1   color2[1] * w2)];
  return rgb;
}

function pickHexBlue(color1, color2, weight) {
  var p = weight;
  var w = p * 2 - 1;
  var w1 = (w / 1   1) / 2;
  var w2 = 1 - w1;
  var rgb = [Math.round(color1[2] * w1   color2[2] * w2)];
  return rgb;
}

var slidercolorred = bodyStyles.getPropertyValue('--resultslidercolorred');
var slidercolorgreen = bodyStyles.getPropertyValue('--resultslidercolorgreen');
var slidercolorblue = bodyStyles.getPropertyValue('--resultslidercolorblue');
var sliderwhitered = bodyStyles.getPropertyValue('--resultsliderwhitered');
var sliderwhitegreen = bodyStyles.getPropertyValue('--resultsliderwhitegreen');
var sliderwhiteblue = bodyStyles.getPropertyValue('--resultsliderwhiteblue');

var whitegradient = [
  [0, [210, 223, 255]],
  [100, [255, 159, 70]],
];

var colorgradient = [
  [0, [255, 0, 0]],
  [33, [0, 255, 0]],
  [66, [0, 0, 255]],
  [100, [255, 0, 0]],
];

var white2colorgradient = [
  [0, [sliderwhitered, sliderwhitegreen, sliderwhiteblue]],
  [100, [slidercolorred, slidercolorgreen, slidercolorblue]],
];

var brightnessgradient = [
  [0, [0, 0, 0]],
  [100, [255, 0, 0]],
];

 .slidercolor {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 20px;
  background: -webkit-linear-gradient(left, hsl(0, 100%, 50%), hsl(10, 100%, 50%), hsl(20, 100%, 50%), hsl(30, 100%, 50%), hsl(40, 100%, 50%), hsl(50, 100%, 50%), hsl(60, 100%, 50%), hsl(70, 100%, 50%), hsl(80, 100%, 50%), hsl(90, 100%, 50%), hsl(100, 100%, 50%), hsl(110, 100%, 50%), hsl(120, 100%, 50%), hsl(130, 100%, 50%), hsl(140, 100%, 50%), hsl(150, 100%, 50%), hsl(160, 100%, 50%), hsl(170, 100%, 50%), hsl(180, 100%, 50%), hsl(190, 100%, 50%), hsl(200, 100%, 50%), hsl(210, 100%, 50%), hsl(220, 100%, 50%), hsl(230, 100%, 50%), hsl(240, 100%, 50%), hsl(250, 100%, 50%), hsl(260, 100%, 50%), hsl(270, 100%, 50%), hsl(280, 100%, 50%), hsl(290, 100%, 50%), hsl(300, 100%, 50%), hsl(310, 100%, 50%), hsl(320, 100%, 50%), hsl(330, 100%, 50%), hsl(340, 100%, 50%), hsl(350, 100%, 50%), hsl(360, 100%, 50%));
  outline: none;
}

.sliderwhite2color {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 5px;
  background-image: linear-gradient(left, rgb(var(--resultsliderwhite)), rgb(var(--resultslidercolor)));
  outline: none;
}

.sliderbrightness {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 10px;
  background-image: linear-gradient(left, black, rgb(var(--resultsliderw2c)));
  outline: none;
}

.sliderwhite {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 10px;
  background-image: linear-gradient(left, rgb(220, 226, 243), rgb(255, 159, 70));
  outline: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
White
<div id="white" min="0" max="360" step="1" class="sliderwhite"></div>
Color
<div id="color" min="0" max="360" step="1" class="slidercolor"></div>
White to Color
<div id="white2color" min="0" max="100" step="1" class="sliderwhite2color"></div>
Brightness
<div id="brightness" min="0" max="100" step="1" class="sliderbrightness"></div>

Вопрос:

Комментарии:

Вам также может понравиться

Время ожидания подключения истекло в CURL на определенном API — VPS Ubuntu 20.04

Текущие значения C # EF 6.setValues не могут изменить ключевую информацию объекта

Что делать с дескрипторами ввода-вывода, когда вы хотите связать конструкторы?