Изменить цвет фона слайдера JQuery

Question

Я понимаю, я могу установить цвет фона значения от мин к текущему выбору слайдера, выполнив:

#slider .ui-slider-range { background: #88ac0b; } 

Как установить цвет фона для Целых слайдер (не только от мин или макс к выбранному значению)

Answer 1

я не смотрел, но я предполагаю, что:

#slider {background-color: #f00; /* or whatever colour you want */ } 

будет работать. Предполагая, что элемент #slider - это то, что я думаю.

---

Отредактировано:

Извините за столь долго на это, посмотрев на демо в jQueryUI (в частности, для цветовой палитры: http://jqueryui.com/demos/slider/#colorpicker), кажется, что background-color свойство, как представляется, применяется через дополнительный классы, применяемые к элементу.

Изменение класса от ui-slider-range до ui-slider-range-max показалось перспективным, но ничего не достигнуто (за исключением, пожалуй, очевидного поворота цветной области).

Это странно.

Answer 2

изображение применяется jquery ui css, которое скрывает любой цвет фона, применяемый к элементам слайдера. просто укажите фоновое изображение как нет в вашем собственном стиле после загрузки jquery css. Я пытаюсь динамически установить цвет диапазона ui-slider (на слайдер на странице html) в зависимости от ui.value и не удастся установить его в опции слайда во время создания слайдера.

Answer 3

$("#slider").slider({ 
    range: "max", 
    min: 1, 
    max: 200, 
    step: 1, 
    slide: function(event, ui) { 
    ....... = ui.value 
    ...... 
    }); 

}); 

Важно здесь range: "max" который показывает фон слайдера порядке возрастания, если хотите уменьшить затем использовать "min" и в тематическом CSS .ui-widget-content атрибута должны Канге в желаемый цвет, как background: #3E8FFF.

Answer 4

Это кажется, что это может повлиять на другие элементы пользовательского интерфейса, если у вас есть, но в моем случае это не проблема, и это сработало:

.ui-widget-content { background: purple; } 

В качестве бонуса, если вы хотите изменить цвет маленькая перетащить ручку, используйте:

.ui-widget-content .ui-state-default { background: chartreuse; } 

(Цветовая гамма представлена ​​только для демонстрационных целей :)

ПРИМЕЧАНИЯ. Я понял это в Chrome, используя следующую процедуру:

1. Открытые инструменты разработчика
2. Выберите вкладку Элементы и выберите ползунок фона с помощью инструмента увеличительного стекла
3. Найти background-color в «вычисленных стилей» и расширить его с маленьким треугольником
4. Нажмите ссылка (например,jquery-ui.css:62) на правой стороне, чтобы увидеть соответствующую строку УСС
5. Copy, что линии и поместите его в таблицу стилей, с содержанием вы хотите

Answer 5

Мысль эти значения могут быть полезны для людей, читающих эту тему позже. Эти настройки использовались в слайдере jQuery с двумя ползунками. Hth.

#slider-container {width:200px;} 
#slider-container #slider-min-value {float:left;margin-top:6px;} 
#slider-container #slider-max-value {float:right;margin-top:6px;} 

ОБЩЕГО ПОЛЗУНОК ПРЕДПОСЫЛКА

#slider-container .ui-widget-content { border: 1px solid #aaaaaa; background: #dfe5e7;} 

МЕЖДУ 2 МАРКЕРА ЦВЕТ

#slider-container .ui-widget-header { border: 1px solid #aaaaaa; background: #00caff; } 

МАРКЕР

#slider-container .ui-state-default { border: 1px solid #aaaaaa; background: #ffffff; } 
#slider-container .ui-state-default { background-image: url('slider-button.png'); } 

Answer 6

УС:

• Используйте это с классами:

  .ui-widget-content .sliderTestClass { background: #000000; } 
  

• или это для идентификаторов:

  #mySlider { background: #000000; } 
  

---

JavaScript:

$('#mySlider').slider({   
    min: -1, 
    max: 1, 
    value: 0, 
    step: 0.1, 
    slide: function() { 
     // do stuff 
    } 
}); 

---

HTML:

<div id="mySlider" class="sliderTestClass"></div> 

Answer 7

я попробовал некоторые другие ответы, но ни один из них, казалось, работать сами по себе. это работает для меня, чтобы получить как диапазон и остальную часть слайдера быть тем же цветом:

$("#my-slider").css('background', 'rgb(0,255,0)'); 
$("#my-slider .ui-slider-range").css('background', 'rgb(0,255,0)'); 

Answer 8

.ui-slider { 
background: #88ac0b; 
} 

окрасит весь спектр всех ползунков. При необходимости ограничьте.

Answer 9

придайте стиль div ползунка, не указывать фоновое изображение: нет; , а затем дать цвет и хотите!

CSS

#slider-range{ 
    background-color: rgba(187,145,19,0.2); 
    background-image: none; 
} 

HTML

<div id="slider-range" style="width:430px;"></div> 

Answer 10

Для ваших целей вы должны сделать JQuery слайдер фон прозрачным и установить цвет фона непосредственно в элементе контейнера. Что-то вроде этого:

#slider{ background: #88ac0b; } 
.ui-slider-range { background: transparent; } 

Это позволит установить ползунок цвет фона для вашего цвета и переопределить любой JQuery слайдер CSS цвет.

Answer 11

Ответ на этот вопрос заключается в том, чтобы установить фоновое изображение на ничто перед настройкой собственного цвета. Найдите имя класса с проверкой элемента с помощью хром!

Answer 12

if(true){ 
    $('.ui-slider2-range').css('background-color','red'); 
}else { 
    $('.ui-slider2-range').css('background-color','green'); 
}