ui-rangebar
Elessar.js
AngularJS directive forDraggable multiple range sliders
Installation
Install ui-rangebar via npm or bower:
npm install ui-rangebar |
bower install ui-rangebar |
---|
Simple Usage
- Reference ui-rangebar to angularjs:
angular;
- Add in your html page
Usage with options
In addition to Elessar options
syncOnChanging:false, //Sync ngModel on 'changing' event
model: {
bind: {
startProp: "", //Name of property to be bound for start of range
endProp: "", //Name of property to be bound for end of range
totalSize: "" //Name of property for total size of the range
valuesKeyPath: "", //Path to values array ex. person.intervals. Useful for nested objects
},
formatter: fn //a function that returns start and end range as array in a format that will be bound to ngModel
},
addrange: function (range, bar, index){},//Event raised when new range is added
changing: function (ev, range, bar) {},
change: function (ev, ranges, changed) {},
click: function (ev, bar, index) {},
mouseenter: function (ev, bar, index) {},
mouseleave: function (ev, bar, index) {},
mousedown: function (ev, bar, index) {},
mouseup: function (ev, bar, index) {},
Update selected range explicitly
Note:
Following cases apply only in case ngModel is updated/removed explicitly. Otherwise it's sufficient to add or remove item from ngModel array and changes will be reflected. See demos!
In case ngModel is changed by an external source such as popover/popup, you might need to force update for the selected bar.
bar; //bar - selected range obj, can be fetched from any event, typically from click event // @newModel: optional parameter.bar; //Recommended
Remove selected range explicitly
bar;
Advance Example
Example with nested values. Set, add and remove from ngModel.
Following example could be done much easier using momentjs. This is just for demostration purpose.
Controller.js
{ app { var vm = this; var counter = 0; var baseName = "X_"; var sampleModel = name: "Interval X" startTime: "04:10:00" endTime: "06:10:00"; var values = name: "Main object" intervals: startTime: "17:10:00" endTime: "23:55:00" totalHours: "" startTime: "08:40:00" endTime: "14:10:00" totalHours: "" vmvalues = values; //Set ngModel vm { vmvalues = values; } vmoptions = syncOnChanging:true min: 0 max: 1440 rangeClass: "green" model: bind: startProp: "startTime" endProp: "endTime" totalSize: "totalHours" valuesKeyPath: "intervals" formatter: formatter { return a0 + " - " + a1; } valueFormat: minutesToHours valueParse: timeToMinutes ; { var array = ; array; return array; } { minutes = Math; var h = "00" + Math; var m = "00" + Math; return h + ":" + m; } { try var parts = time; if partslength === 1 return time; var h = parts0; var m = parts1; return h * 60 + m * 1; catch e return time; } vm { if !vmvalues vmvalues = ; var modelCopy = angular; modelCopyname = baseName + counter; vmvaluesintervals; //Add to ngModel counter++; } vm { vmvaluesintervals; //Remove from ngModel } }}angular;
index.html
ui-rangebar
- ##### uiRangebarConfigProvider: Configure default options for the whole application
Note: Configuration from attributes or controller will have priority against config provider.
angular ;
- ##### uiInstance: Instance of rangebar object. Avoid using it for add/remove operations since it might not syncronize with ngModel. Use it for readonly purpose!
$scoperangeBarInstance = {};