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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

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

(Представленная цветовая схема предназначена только для демонстрации.:)

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

• Открыть инструменты разработчика
• Выберите вкладку Элементы и выберите фон ползунка с помощью инструмента увеличительного стекла.
• Найти background-color в "Вычисленных стилях" и развернуть его с помощью маленького треугольника
• Нажмите ссылку (например, jquery-ui.css:62) справа, чтобы увидеть соответствующую строку css
• Скопируйте эту строку и поместите ее в таблицу стилей, с содержанием, которое вам нравится

Ответ 4

Думали, что эти значения могут быть полезны для людей, читающих эту тему позже. Эти настройки использовались в слайдере 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'); }

Ответ 5

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

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

Это установит цвет фона слайдера на ваш цвет и переопределит любой цвет CSS слайдера jQuery.

Ответ 6

Я не смотрел, но я бы предположил, что:

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

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

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

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

Это странно.

Ответ 7

CSS

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

  .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>

Ответ 8

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

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

Ответ 9

придайте стиль div-слайдеру, не забудьте указать background-image: none; а затем дать цвет и хотите!

CSS

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

HTML

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

Ответ 10

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

Ответ 11

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

Ответ 12

$( "#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.