Ползунок jQuery - установите цвет фона, чтобы показать желаемый диапазон

Question

Я устанавливаю слайдер jQuery UI Filament Group и использую его в журнале успеваемости.

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

Есть предложения, как этого добиться? Исходя из того, что я экспериментировал с использованием Firebug, похоже, что <div class="ui-slider"> настроен, но значения внутри него, похоже, не позволяют задавать фоновые цвета (это допускает только div).

Спасибо за вашу помощь.

Answer 1

Как я понимаю, вы используете плагин Filament Group, чтобы указать, где должна отображаться затененная область, и, следовательно, это не является частью реальной проблемы отображения области. Поэтому мое решение сосредоточено только на чистом слайдере jQuery.

Как вы сказали, я бы использовал div (здесь называемый slider-shaded), чтобы сделать слайдер, а затем поместил бы в него еще один div, чтобы отметить область. Это близко к тому, как это делает jQuery (размещение div внутри div слайдера). Я назвал эту область range в моем следующем коде. В этом примере заштрихованная область размещается от 65% до 85%

HTML

<div id="slider-shaded"><div id="range"></div></div>

CSS

#range {
    position: absolute;
    height:100%;
    width:20%;
    top: 0;
    left: 65%;
    background-color:gray;
}

Javascript

$(document).ready(function() {
    $("#slider-shaded").slider();
});

Я сделал демоверсию излишнего убийства, когда смотрел Безумцев. Здесь .