JQuery UI слайдер - это может выглядеть так?

Question

Можно ли сделать так, чтобы jQuery UI Slider был похож на это?Если да, то как?

Answer 1

Редактировать: Это возможно при использовании бегунок диапазона

DEMO

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image -->") !important;
}

#slider .ui-slider-range { background-color: #58BEEA; background-image: none; }

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

Вы можете довести это до крайности, добавив div ... но это слишком много для простого слайдера.

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image for sider-->") !important;
}

DEMO

Answer 2

Да. Используя изображения. Обработчик является a-элементом, поэтому в css установите для него высоту изображения вашего обработчика и задайте изображение как background-image.

Это в основном все, что вам нужно сделать .. Остальное поддерживается плагином слайдера.

Answer 3

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

Answer 4

Как сказал @Sander Bruggeman.

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

в следующей отметке вы добавляете еще один div для поддержки состояния вашего синего пути.

<div class="demo">

    <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <div class="blue-path-state"></div>
        <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a>
    </div>

</div><!-- End demo -->

для обновления .blue-path-state,вам нужно будет прослушать событие change, если вы просматриваете документацию для слайдера, вы можете запустить свою пользовательскую функцию для этого события, которая обновит фоновое изображение .blue-path-state, чтобы наложить путь на синий фон, чтобы создать этот синийзаполните и настройте ширину или фоновую позицию этого синего состояния пути с помощью события изменения и вашей пользовательской функции.

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

var slider = $( ".selector" );
var blue_path = $('.blue-path-state',slider);
slider.slider({
    change: function(event, ui) {
        blue_path.css('width':slider.slider( "value" )); // set width of the blue line
    }
});

Answer 5

Да, я так думаю. Единственная проблема - радиальный градиент и форма ползунка. Кроме того, это никогда не будет работать в IE. Я бы сказал вам, как, но мне нужно провести некоторое исследование по настройке слайдеров.

Редактировать

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

/*Bar*/
#barblue, #bargrey {
height:5px;
border-radius: 2px;
background-color: deepskyblue;
border: 1px solid darkcyan;
width: 50%;
box-shadow: inset 0px 0px 2px darkcyan;
}
#bargrey {
background-color: lightgrey;
border-color: grey;
box-shadow: inset 0px 0px 2px grey;
}
/*Slider*/
#slider {
border-radius: 50px 50px 90px 90px;
border: 1px solid grey;
height: 20px;
width: 15px;
background: grey;
box-shadow: 0px 0px 2px grey;
}

Для слайдера вам нужно использовать изображение, чтобы придать металлический вид.