Hi all,
Has anyone implemented a variation of RangeSliderInterval in ODC, where you can "drag" the bar instead of changing the start and end handles?
I've been trying to extend the OutSystems UI widget (it is built with noUiSlider library) with some JS, to add "behaviour: drag" property, however it doesn't seem to work as expected.
An example of it is at the bottom of this page: https://refreshless.com/nouislider/
I was able to fix it by destroying the initialized widget instance upon the Initialized event of it, and then by re-creating it so drag event listeners are properly bound. Example code:
var sliderContainer = document.getElementById($parameters.In_SliderId);
if (sliderContainer) {
var actualSliderElement = sliderContainer.classList.contains('noUi-target')
? sliderContainer
: sliderContainer.querySelector('.noUi-target');
// --- UPDATED: Fetch, mutate, and re-apply the full options object ---
if (actualSliderElement && actualSliderElement.noUiSlider) {
var instance = actualSliderElement.noUiSlider;
// Preserve live references (formatter objects are not JSON-serializable)
var originalTooltips = instance.options.tooltips;
var originalFormat = instance.options.format;
var originalAriaFormat = instance.options.ariaFormat;
// Snapshot the rest of the options safely
var currentOptions = JSON.parse(JSON.stringify(instance.options));
// Restore the live formatter references
currentOptions.tooltips = originalTooltips;
currentOptions.format = originalFormat;
currentOptions.ariaFormat = originalAriaFormat;
currentOptions.behaviour = 'drag';
// Destroy and re-create so drag event listeners are properly bound
instance.destroy();
noUiSlider.create(actualSliderElement, currentOptions);
console.log('RangeSlider re-initialized with drag behaviour.');
}