Возможный дубликат:
Цветовое кодирование на основе номера
Я хочу, чтобы пользователь мог выбирать из диапазона от 1 до 100, где, когда число становится меньше 50, цвет области становится более темным, а по мере того, как цвет становится ближе к 100, цвет становится более красным.
Я пытаюсь сделать так, чтобы, когда диапазон больше по направлению к центру, цвет должен быть близок к белому (где 50 = полный белый).
Я попробовал ответ отсюда: Генерировать цвета между красным и зеленым для измерителя мощности? безрезультатно.... 50 заканчивается тем, что он путается зеленым...
У меня есть следующий html:
<span><span class="value">50</span><input type="range" /></span>
И следующий javascript:
$(document).on({
change: function(e) {
var self = this,
span = $(self).parent("span"),
val = parseInt(self.value);
if (val > 100) {
val = 100;
}
else if (val < 0) {
val = 0;
}
$(".value", span).text(val);
var r = Math.floor((255 * val) / 100),
g = Math.floor((255 * (100 - val)) / 100),
b = 0;
span.css({
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
}
}, "input[type='range']");
Fiddle: http://jsfiddle.net/maniator/tKrM9/1/
Я пробовал много разных комбинаций r, g, b, но я действительно не могу понять, как это правильно.