<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 1 (clear on select)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-one"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container"></div>
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 2 (no clear button)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-two"></div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 3 (initially inactive)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-three"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 4 (Disabled)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-four" disabled></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 5 (clear resets range to min/max) </div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-five"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 6 (Offset 100 when range min/max vlaues are equal) </div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-six"></div>
</div>
</div>
<div style="display:flex;">
<div onclick="sliderFive.updateRangeValues(800, 1600)" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 values + don't activate
</div>
<div onclick="sliderFive.updateRangeValues(1000, 1500, true)" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 values + activate
</div>
<div onclick="sliderFive.updateRangeMinMax(100, 5000)" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 range min/max 100/5000
</div>
<div onclick="sliderFive.updateRangeMinMax(0, 2000)" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 range min/max 0/2000
</div>
</div>
<script>
var sliderElementOne = document.getElementById('slider-one');
var sliderElementTwo = document.getElementById('slider-two');
var sliderElementThree = document.getElementById('slider-three');
var sliderElementFour = document.getElementById('slider-four');
var sliderElementFive = document.getElementById('slider-five');
var sliderElementSix = document.getElementById('slider-six');
const currencyFormat = {
mark: '.',
thousand: ',',
prefix: '$ ',
decimals: 2,
};
const numberFormat = {
thousand: ',',
decimals: 0,
}
const sliderOne = new acl.ACLRangeSlider(sliderElementOne, {
range: {
min: 0,
max: 2000
},
preset: {
min: 150,
max: 500
},
colour: '#1FACEC',
numberFormat,
inactive: false,
showClearOnSelect: true,
clearResetToRangeMinMax: false
});
const sliderTwo = new acl.ACLRangeSlider(sliderElementTwo, {
range: {
min: 1000,
max: 2000
},
preset: {
min: 1050,
max: 2000
},
colour: '#2888D6',
numberFormat,
inactive: false,
showClearOnSelect: false
});
const sliderThree = new acl.ACLRangeSlider(sliderElementThree, {
range: {
min: 1000,
max: 2000
},
colour: '#25547E',
numberFormat: currencyFormat,
inactive: true,
showClearOnSelect: true
});
const sliderFour = new acl.ACLRangeSlider(sliderElementFour, {
range: {
min: 10,
max: 100
},
preset: {
min: 25,
max: 75
},
colour: '#1FACEC',
numberFormat
});
const sliderFive = new acl.ACLRangeSlider(sliderElementFive, {
range: {
min: 0,
max: 2000
},
preset: {
min: 200,
max: 1800
},
colour: '#1FACEC',
numberFormat,
inactive: false,
showClearOnSelect: true,
clearResetToRangeMinMax: true
});
const slidersix = new acl.ACLRangeSlider(sliderElementSix, {
range: {
min: 1000,
max: 1000
},
colour: '#1FACEC',
numberFormat,
showClearOnSelect: true,
clearResetToRangeMinMax: true,
inactive: true
});
sliderElementOne.addEventListener('rangeslider', function(e) {
console.log('slider 1: rangeslider', e.detail);
});
sliderElementTwo.addEventListener('rangeslider', function(e) {
console.log('slider 2: rangeslider', e.detail);
});
sliderElementThree.addEventListener('rangeslider', function(e) {
console.log('slider 3: rangeslider', e.detail);
});
sliderElementFive.addEventListener('rangeslider', function(e) {
console.log('slider 5: rangeslider', e.detail);
});
sliderElementOne.addEventListener('rangeslidercleared', function(e) {
console.log('slider 1: rangeslidercleared', e.detail);
});
sliderElementTwo.addEventListener('rangeslidercleared', function(e) {
console.log('slider 2: rangeslidercleared', e.detail);
});
sliderElementThree.addEventListener('rangeslidercleared', function(e) {
console.log('slider 3: rangeslidercleared', e.detail);
});
sliderElementFive.addEventListener('rangeslidercleared', function(e) {
console.log('slider 5: rangeslidercleared', e.detail);
});
</script>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 1 (clear on select)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-one"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container"></div>
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 2 (no clear button)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-two"></div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 3 (initially inactive)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-three"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 4 (Disabled)</div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-four" disabled></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 5 (clear resets range to min/max) </div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-five"></div>
</div>
</div>
<div style="width: 300px; margin: 0 25px 50px">
<div class="acl-range-slider__container">
<div class="acl-range-slider__header">
<div class="acl-range-slider__title">Slider 6 (Offset 100 when range min/max vlaues are equal) </div>
<div class="acl-range-slider__clear">Clear</div>
</div>
<div class="acl-range-slider" id="slider-six"></div>
</div>
</div>
<div style="display:flex;">
<div onclick="sliderFive.updateRangeValues(800, 1600)"
style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 values + don't activate
</div>
<div onclick="sliderFive.updateRangeValues(1000, 1500, true)"
style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 values + activate
</div>
<div onclick="sliderFive.updateRangeMinMax(100, 5000)"
style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 range min/max 100/5000
</div>
<div onclick="sliderFive.updateRangeMinMax(0, 2000)"
style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 350px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
DEMO Update Slider 5 range min/max 0/2000
</div>
</div>
<script>
var sliderElementOne = document.getElementById('slider-one');
var sliderElementTwo = document.getElementById('slider-two');
var sliderElementThree = document.getElementById('slider-three');
var sliderElementFour = document.getElementById('slider-four');
var sliderElementFive = document.getElementById('slider-five');
var sliderElementSix = document.getElementById('slider-six');
const currencyFormat = {
mark: '.',
thousand: ',',
prefix: '$ ',
decimals: 2,
};
const numberFormat = {
thousand: ',',
decimals: 0,
}
const sliderOne = new acl.ACLRangeSlider(sliderElementOne, {
range: {
min: 0,
max: 2000
},
preset: {
min: 150,
max: 500
},
colour: '#1FACEC',
numberFormat,
inactive: false,
showClearOnSelect: true,
clearResetToRangeMinMax: false
});
const sliderTwo = new acl.ACLRangeSlider(sliderElementTwo, {
range: {
min: 1000,
max: 2000
},
preset: {
min: 1050,
max: 2000
},
colour: '#2888D6',
numberFormat,
inactive: false,
showClearOnSelect: false
});
const sliderThree = new acl.ACLRangeSlider(sliderElementThree, {
range: {
min: 1000,
max: 2000
},
colour: '#25547E',
numberFormat: currencyFormat,
inactive: true,
showClearOnSelect: true
});
const sliderFour = new acl.ACLRangeSlider(sliderElementFour, {
range: {
min: 10,
max: 100
},
preset: {
min: 25,
max: 75
},
colour: '#1FACEC',
numberFormat
});
const sliderFive = new acl.ACLRangeSlider(sliderElementFive, {
range: {
min: 0,
max: 2000
},
preset: {
min: 200,
max: 1800
},
colour: '#1FACEC',
numberFormat,
inactive: false,
showClearOnSelect: true,
clearResetToRangeMinMax: true
});
const slidersix = new acl.ACLRangeSlider(sliderElementSix, {
range: {
min: 1000,
max: 1000
},
colour: '#1FACEC',
numberFormat,
showClearOnSelect: true,
clearResetToRangeMinMax: true,
inactive: true
});
sliderElementOne.addEventListener('rangeslider', function (e) {
console.log('slider 1: rangeslider', e.detail);
});
sliderElementTwo.addEventListener('rangeslider', function (e) {
console.log('slider 2: rangeslider', e.detail);
});
sliderElementThree.addEventListener('rangeslider', function (e) {
console.log('slider 3: rangeslider', e.detail);
});
sliderElementFive.addEventListener('rangeslider', function (e) {
console.log('slider 5: rangeslider', e.detail);
});
sliderElementOne.addEventListener('rangeslidercleared', function (e) {
console.log('slider 1: rangeslidercleared', e.detail);
});
sliderElementTwo.addEventListener('rangeslidercleared', function (e) {
console.log('slider 2: rangeslidercleared', e.detail);
});
sliderElementThree.addEventListener('rangeslidercleared', function (e) {
console.log('slider 3: rangeslidercleared', e.detail);
});
sliderElementFive.addEventListener('rangeslidercleared', function (e) {
console.log('slider 5: rangeslidercleared', e.detail);
});
</script>
/* No context defined. */
.acl-range-slider {
margin: 0 25px;
&__container {
width: 100%;
margin-bottom: 50px;
}
&__header {
border-bottom: 2px solid #e4f8f6;
margin-bottom: 50px;
&--disabled {
border-bottom: 2px solid #e0e0e0;
}
}
&__title {
color: rgba(0, 0, 0, 0.75);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 16px;
}
&__clear {
color: #2888d6;
font-size: 10px;
letter-spacing: 0;
line-height: 14px;
text-decoration: underline;
text-align: right;
margin-bottom: 5px;
cursor: pointer;
&--hidden {
visibility: hidden;
}
}
&__tooltip {
display: none;
position: absolute;
background-color: #e0e0e0;
color: rgba(0, 0, 0, 0.75);
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
padding: 1px;
line-height: 14px;
border-radius: 10px;
min-width: 50px;
justify-content: center;
align-items: center;
margin-left: -25px;
top: 5px;
&:after {
position: absolute;
content: '';
left: 20px;
border-radius: 5px;
top: 15px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #e0e0e0;
}
&--show {
display: flex;
}
}
}
// noUiSlider overrides in provided format:
.acl-range-slider-target,
.acl-range-slider-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acl-range-slider-target {
position: relative;
}
.acl-range-slider-base,
.acl-range-slider-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
.acl-range-slider-connects {
overflow: hidden;
z-index: 0;
}
.acl-range-slider-connect,
.acl-range-slider-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
.acl-range-slider-connect {
height: 100%;
width: 100%;
}
.acl-range-slider-origin {
height: 10%;
width: 10%;
}
/* Offset direction
*/
.acl-range-slider-txt-dir-rtl.acl-range-slider-horizontal .acl-range-slider-origin {
left: 0;
right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.acl-range-slider-vertical .acl-range-slider-origin {
width: 0;
}
.acl-range-slider-horizontal .acl-range-slider-origin {
height: 0;
}
.acl-range-slider-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.acl-range-slider-touch-area {
height: 100%;
width: 100%;
}
.acl-range-slider-state-tap .acl-range-slider-connect,
.acl-range-slider-state-tap .acl-range-slider-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.acl-range-slider-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.acl-range-slider-horizontal {
height: 3px;
}
.acl-range-slider-horizontal .acl-range-slider-handle {
width: 13px;
height: 13px;
right: -8px;
top: -5px;
}
.acl-range-slider-vertical {
width: 18px;
}
.acl-range-slider-vertical .acl-range-slider-handle {
width: 13px;
height: 13px;
right: -5px;
top: -17px;
}
.acl-range-slider-txt-dir-rtl.acl-range-slider-horizontal .acl-range-slider-handle {
left: -17px;
right: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.acl-range-slider-target {
background: #e0e0e0;
border-radius: 8px;
}
.acl-range-slider-connects {
border-radius: 3px;
}
.acl-range-slider-connect {
background: #3fb8af;
}
/* Handles and cursors;
*/
.acl-range-slider-draggable {
cursor: ew-resize;
}
.acl-range-slider-vertical .acl-range-slider-draggable {
cursor: ns-resize;
}
.acl-range-slider-handle {
border: 2px solid #d9d9d9;
border-radius: 8px;
background: #fff;
cursor: pointer;
&:hover {
.acl-range-slider-tooltip {
display: block;
}
}
}
[disabled] .acl-range-slider-connect {
background: #b8b8b8;
}
[disabled].acl-range-slider-target,
[disabled].acl-range-slider-handle,
[disabled] .acl-range-slider-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.acl-range-slider-pips,
.acl-range-slider-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acl-range-slider-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.acl-range-slider-value {
position: absolute;
white-space: nowrap;
text-align: center;
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
line-height: 10px;
text-align: center;
}
.acl-range-slider-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.acl-range-slider-marker {
position: absolute;
background: #ccc;
display: none;
}
.acl-range-slider-marker-sub {
background: #aaa;
}
.acl-range-slider-marker-large {
background: #aaa;
}
/* Horizontal layout;
*
*/
.acl-range-slider-pips-horizontal {
padding: 10px 0;
//height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.acl-range-slider-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.acl-range-slider-rtl .acl-range-slider-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.acl-range-slider-marker-horizontal.acl-range-slider-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.acl-range-slider-marker-horizontal.acl-range-slider-marker-sub {
height: 10px;
}
.acl-range-slider-marker-horizontal.acl-range-slider-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.acl-range-slider-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.acl-range-slider-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding-left: 25px;
}
.acl-range-slider-rtl .acl-range-slider-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.acl-range-slider-marker-vertical.acl-range-slider-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.acl-range-slider-marker-vertical.acl-range-slider-marker-sub {
width: 10px;
}
.acl-range-slider-marker-vertical.acl-range-slider-marker-large {
width: 15px;
}
.acl-range-slider-tooltip {
display: block;
position: absolute;
border-radius: 10px;
background: #e0e0e0;
color: #000;
padding: 1px 5px;
text-align: center;
white-space: nowrap;
color: rgba(0, 0, 0, 0.75);
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
line-height: 14px;
margin-bottom: 5px;
&:after {
position: absolute;
content: '';
border-radius: 5px;
top: 14px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #e0e0e0;
margin: 0 -50%;
}
}
.acl-range-slider-horizontal .acl-range-slider-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.acl-range-slider-vertical .acl-range-slider-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.acl-range-slider-horizontal .acl-range-slider-origin > .acl-range-slider-tooltip {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
left: auto;
bottom: 10px;
}
.acl-range-slider-vertical .acl-range-slider-origin > .acl-range-slider-tooltip {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
top: auto;
right: 28px;
}
.acl-range-slider-tooltip {
display: none;
}
.acl-range-slider-active .acl-range-slider-tooltip {
display: block;
}
import noUiSlider from 'nouislider';
import wNumb from 'wnumb';
class ACLRangeSlider {
constructor(
sliderEl,
options = {
range,
preset,
colour: `#1FACEC`,
numberFormat: null,
inactive: false,
showClearOnSelect: true,
clearResetToRangeMinMax: false,
}
) {
this.sliderEl = sliderEl;
this.sliderContainer = sliderEl.parentElement;
if (options.range.min === options.range.max) options.range.max += 100;
this.options = options;
this.isDisabled = this.sliderEl.hasAttribute('disabled');
this.numberFormat = options.numberFormat;
this.decimalPlaces = this.numberFormat && this.numberFormat.decimals ? this.numberFormat.decimals : 0;
this.bounds = this.getDefaultBounds();
this.createSlider(this.options);
this.configureSliderHeader();
}
getDefaultBounds() {
const bounds = {
lower: this.options.preset ? this.options.preset.min : this.options.range.min,
upper: this.options.preset ? this.options.preset.max : this.options.range.max,
};
return bounds;
}
createSlider() {
let sliderConfig = {
start: [this.bounds.lower, this.bounds.upper],
connect: true,
tooltips: true,
range: {
min: this.options.range.min,
max: this.options.range.max,
},
pips: this.getPipsOptions(),
cssPrefix: 'acl-range-slider-',
};
if (typeof this.numberFormat === 'object' && this.numberFormat !== null) {
const numberFormat = { format: wNumb(this.numberFormat) };
sliderConfig = Object.assign(sliderConfig, numberFormat);
}
if (this.options.inactive) {
this.sliderEl.setAttribute('inactive', 'true');
}
noUiSlider.create(this.sliderEl, sliderConfig);
this.assignSliderColour();
this.assignSliderEventListeners();
}
assignSliderEventListeners() {
this.sliderEl.noUiSlider.on('start', () => {
if (this.options.inactive) {
this.setActive(true);
}
});
this.sliderEl.noUiSlider.on('change', (values, handle, unencoded) => {
if (this.options.inactive) {
this.setActive(true);
}
this.showClear(true);
this.dispatchCustomEvent(this.sliderEl, 'rangeslider', {
id: this.sliderEl.id,
values: {
lower: this.round(unencoded[0], this.decimalPlaces),
upper: this.round(unencoded[1], this.decimalPlaces),
},
});
});
}
assignSliderColour() {
const doesStyleExist = this.sliderEl.querySelector(`#${this.sliderEl.id}`);
doesStyleExist ? doesStyleExist.remove : '';
const colour = this.isDisabled || this.options.inactive ? '#9F9F9F' : this.options.colour;
const style = `<style id="${this.sliderEl.id}">
#${this.sliderEl.id} .acl-range-slider-connect {
background: ${colour};
}
#${this.sliderEl.id} .acl-range-slider-handle {
border: 3px solid ${colour};
}
</style>`;
this.sliderEl.insertAdjacentHTML('beforeend', style);
}
configureSliderHeader() {
const header = this.sliderContainer.querySelector('.acl-range-slider__header');
this.clearEl = header ? header.querySelector('.acl-range-slider__clear') : null;
if (!header) return;
this.showClear(!this.options.inactive);
if (this.isDisabled) {
header.classList.add('acl-range-slider__header--disabled');
} else if (this.clearEl && this.options.showClearOnSelect) {
this.clearEl.addEventListener('click', event => {
this.clearSelection(true);
});
}
}
clearSelection(dispatchClearEvent) {
this.setActive(false);
if (this.options.clearResetToRangeMinMax) {
this.sliderEl.noUiSlider.set([this.options.range.min, this.options.range.max]);
} else {
this.sliderEl.noUiSlider.set([this.bounds.lower, this.bounds.upper]);
}
if (dispatchClearEvent) {
this.dispatchCustomEvent(this.sliderEl, 'rangeslidercleared', {
id: this.sliderEl.id,
});
}
}
updateRangeValues(lower, upper, setActive = false) {
this.sliderEl.noUiSlider.set([lower, upper]);
if (setActive) {
this.setActive(true);
}
}
updateRangeMinMax(rangeMin, rangeMax) {
this.options.range.min = rangeMin;
this.options.range.max = rangeMax;
this.sliderEl.noUiSlider.updateOptions({
range: {
min: this.options.range.min,
max: this.options.range.max,
},
pips: this.getPipsOptions(),
});
}
setActive(isActive) {
this.options.inactive = !isActive;
this.assignSliderColour();
this.showClear(isActive);
}
dispatchCustomEvent(element, eventName, detailObj) {
element.dispatchEvent(
new CustomEvent(eventName, {
detail: detailObj,
})
);
}
showClear(isVisible) {
if (!this.clearEl) return;
if (this.options.showClearOnSelect && isVisible) {
this.clearEl.classList.remove('acl-range-slider__clear--hidden');
} else {
this.clearEl.classList.add('acl-range-slider__clear--hidden');
}
}
getPipsOptions() {
return {
mode: 'values',
values: [this.options.range.min, this.options.range.max],
density: this.options.range.max,
format: wNumb({
decimals: this.numberFormat ? this.numberFormat.decimals : 0,
prefix: this.numberFormat ? this.numberFormat.prefix : '',
suffix: this.numberFormat ? this.numberFormat.suffix : '',
mark: this.numberFormat ? this.numberFormat.mark : '',
thousand: this.numberFormat ? this.numberFormat.thousand : '',
}),
};
}
round(number, decimalPlaces) {
const factorOfTen = Math.pow(10, decimalPlaces);
return Math.round(number * factorOfTen) / factorOfTen;
}
}
export { ACLRangeSlider };
No notes defined.