noUiSlider
noUiSlider is a free and lightweight JavaScript range slider with multi-touch support.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                nouislider: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div id="slider"></div>
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});
Customize variables at:/library/extend/components/_nouislider.scss
Component's defaults:/library/components/nouislider/_defaults.scss
NameDefault valueNote
$noUi-css-prefixnoUi
$dx-nouislider-size4px
$dx-nouislider-border-width0
$dx-nouislider-border-radius4px
$dx-nouislider-border-colortransparent
$dx-nouislider-handler-size16px
$dx-nouislider-handler-border-radius16px
$dx-nouislider-handler-transition.15s
$dx-nouislider-handler-active-transformscale(1.1)
$dx-nouislider-handler-box-shadow0px 1px 3px rgba(24, 24, 25, 0.16)
$dx-nouislider-handler-active-box-shadownull
$dx-nouislider-handler-disabled-box-shadownull
$dx-nouislider-pipe-spacing10px
$dx-nouislider-pipe-marker-depth5px
$dx-nouislider-pipe-large-marker-depth10px
$dx-nouislider-pipe-value-spacing5px
$dx-nouislider-pipe-text-colorui-base-color-6
$dx-nouislider-pipe-marker-colorui-base-color-6
$dx-nouislider-pipe-sub-marker-colorui-base-color-6
$dx-nouislider-pipe-large-marker-colorui-base-color-6
$dx-nouislider-tooltip-border-width1px
$dx-nouislider-tooltip-padding-y5px
$dx-nouislider-tooltip-padding-x5px
$dx-nouislider-tooltip-spacing4px
$dx-nouislider-tooltip-font-size12px
$dx-nouislider-tooltip-font-weightnormal
$dx-nouislider-tooltip-line-height1
$dx-nouislider-tooltip-border-radius4px
$dx-nouislider-tooltip-colorpopover-text-color
$dx-nouislider-tooltip-background-colorpopover-bg
$dx-nouislider-tooltip-border-colortransparent

Make sure to read the Customize components and Understanding and using the design system guides.

{title}