45 lines
No EOL
1.5 KiB
Markdown
45 lines
No EOL
1.5 KiB
Markdown
# Слайдер с событиями
|
||
|
||
[importance 5]
|
||
|
||
На основе слайдера из задачи [](/task/slider) создайте графический компонент, который умеет возвращать/получать значение.
|
||
|
||
Синтаксис:
|
||
|
||
```js
|
||
var slider = new Slider({
|
||
elem: $('#slider'),
|
||
max: 100 // слайдер на самой правой позиции соответствует 100
|
||
});
|
||
```
|
||
|
||
Метод `setValue` устанавливает значение:
|
||
|
||
```js
|
||
slider.setValue(50);
|
||
```
|
||
|
||
У слайдера должно быть два события: `slide` при каждом передвижении и `change` при отпускании мыши (установке значения).
|
||
|
||
Пример использования:
|
||
|
||
```js
|
||
$(slider).on({
|
||
slide: function(value) {
|
||
$('#slide').html(value);
|
||
},
|
||
change: function(value) {
|
||
$('#change').html(value);
|
||
}
|
||
});
|
||
```
|
||
|
||
В действии:
|
||
[iframe src="solution" height="60"]
|
||
|
||
<ul>
|
||
<li>Дизайн слайдера, ширина/высота элементов должна быть изменяемой через CSS, без необходимости трогать JS-код.</li>
|
||
<li>Центр бегунка должен располагаться над значением. Например, он должен быть в центре для 50 при максимуме 100.</li>
|
||
</ul>
|
||
|
||
Исходный документ -- возьмите решение из задачи [](/task/slider). |