Изменение изображения ручки слайдера

Ответ 1

Из jQuery UI docs:

Плагин jQuery UI Slider использует jQuery UI CSS Framework для стилизации внешний вид, включая цвета и фоновые текстуры. Мы рекомендуем с помощью средства ThemeRoller для создания и загружать пользовательские темы, которые легко создавать и поддерживать.

Если более глубокий уровень настройки необходимо, есть специфичные для виджета классы, указанные в ui.slider.css таблица стилей, которая может быть модифицирована. Эти классы высокопоставленные выделен жирным шрифтом.

В этом конкретном случае вы хотите взглянуть на элемент с именем класса ui-slider-handle.

Элемент дескриптора ползунка по умолчанию имеет к нему следующие классные имена:

• ui-slider-handle
• ui-state-default
• щ-краеугольный все

Взгляните на CSS, соответствующий этим классам, и вы, скорее всего, сможете редактировать все, что вам нужно.

Кроме того, я предлагаю вам установить Firebug. Этот плагин Firefox позволит вам сделать такие задачи намного проще.

Ответ 2

#demo-frame > div.demo { 
    padding: 10px !important; 
    float: left;
}
.contentContainer {
    float: left;
    width: 400px;
    height: 500px;
    overflow: hidden;
}
.ui-slider-vertical .ui-state-default { 
    border: none; 
    width: 28px; 
    height: 82px; 
    background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
    left: 0;
    margin-bottom: -41px;
    margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
    background: none;
}
#slider-vertical, .ui-slider {
    border: none;
    width: 50px;
    height: 50px;
    background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}

кто-то спросил в разделе комментариев для примера кода css, поэтому здесь я использовал, чтобы изменить изображение и прокрутку полосы прокрутки в свои собственные файлы изображений png. Обязательно вставьте css ПОСЛЕ jQuery ui css в раздел заголовка.