So, I was looking for a horizontal scale slider for my widget, and here's what I've discovered:
First, add the bootstrap-slider dependency to your widget:
Then use code like this:
To get results like this:
Since ServiceNow doesn't have any documentation on all the properties in the <slider> controller, I was able to get most of them to work by looking here: Bootstrap-slider documentation
I hope someone finds this useful. Sure would be nice if ServiceNow would document this in their docs website.
Well I'm silly. You can find all the properties here:
https://YOURINSTANCE.service-now.com/scripts/libs/bootstrap-slider/directive.slider.js
Here are the attributes this takes:
scope: {
max: "=?",
min: "=?",
step: "=?",
value: "=?",
ngModel: "=?",
ngDisabled: "=?",
range: "=?",
sliderid: "=?",
ticks: "=?",
ticksLabels: "=?",
ticksSnapBounds: "=?",
ticksPositions: "=?",
scale: "=?",
focus: "=?",
formatter: '&',
onStartSlide: '&',
onStopSlide: '&',
onSlide: '&'
}
However, even though you don't see attributes like "orientation" in the scope object as listed above, the js code has this:
setOption('orientation', attrs.orientation, 'horizontal');
setOption('selection', attrs.selection, 'before');
setOption('handle', attrs.handle, 'round');
setOption('tooltip', attrs.sliderTooltip || attrs.tooltip, 'show');
setOption('tooltip_position', attrs.sliderTooltipPosition, 'top');
setOption('tooltipseparator', attrs.tooltipseparator, ':');
setFloatOption('precision', attrs.precision, decimals.length);
setBooleanOption('tooltip_split', attrs.tooltipsplit, false);
setBooleanOption('enabled', attrs.enabled, true);
setBooleanOption('naturalarrowkeys', attrs.naturalarrowkeys, false);
setBooleanOption('reversed', attrs.reversed, false);
So here's a small example of how I am using it in a custom widget:
