创建一个带拖动功能的条，可充当范围选择器、

Create a draggable bar that could be used as range selector / progress bar / scroll bar or others.

<div id="bar"></div> <script src="bar.min.js"></script> <script> let bar = new Bar(document.querySelector('#bar'), { inner_mode: true }); bar.elem.fill.style.cssText = 'background: red'; bar.render(); bar.on('change', value => { console.log(value); }); </script>

Click DEMO to try it!

let bar = new Bar(container, options);

container (required, type: HTMLElement)

options (optional, type: Object)

default (type: Number, default: 0): initial value of bar

precision (type: Number, default: 2): number of digits after the decimal point

disabled (type: Boolean, default: false): whether value can be set by click/drag

inner_mode (type: Boolean, default: false): whether dot can overflow wrapper

bar.elem; // returns {dot, fill, wrapper}, all of them are HTMLElement. bar.value; // return current value; bar.value = 0.6; // set value to 0.6; Methods

render()

Render bar.

on(event, callback)

Bind callback to event.

events:

enable()

Enable bar evnets(click and drag).

disable()

Disable bar events(click and drag).

hide_dot()

Hide dot Element.

show_dot()

Show dot Element.

hide_fill()

Hide fill Element.

show_fill()

Show fill Element.

After new Bar(container), the DOM structure would become:

<div> // container <div> // wrapper <div></div> // fill <div></div> // dot </div> </div>

We need to set dot/fill style manully because it doesn't has default style.

We could operate it as native DOM element, for example:

bar1.elem.dot.className = 'my-dot'; bar2.elem.dot.style.background = 'red'; bar3.elem.dot.style.cssText = 'background: red';

Remember to execute render() after you update dot/fill style!

Bar could be used on 3 typical scenarios:

range selector

let bar = new Bar(container); bar.elem.dot.style.cssText = 'width: 20px; height: 20px; background: red';

progress bar

let bar = new Bar(container, { disabled: true }); bar.elem.fill.style.cssText = 'background: red';

scroll bar

let bar = new Bar(container, { inner_mode: true }); bar.elem.dot.style.cssText = 'width: 20px; height: 100%; background: red';