1.0.41 • Published 3 years ago
dual-range-slider v1.0.41
Dual Range Slider
This is simple JavaScript Class for Dual Range Slider. Easy to use, easy to install, easy setup.
How it works?
npm install dual-range-slider
or
yarn add dual-range-slider
Create an HTML Markup
<div class="dual-range" id="dual-selector"
data-min="10"
data-max="30"
data-min-label="Min: $"
data-max-label="Max: $">
</div>
then add CSS (SCSS) code to your styles
.dual-range {
--range-size:20px;
--range-width:150px;
--handle-size:1.3;
height:var(--range-size);
width:var(--range-width);
background:var(--clr-box-dark);
border-radius:50px;
position:relative;
user-select:none;
.highlight {
position:absolute;
height:var(--range-size);
width:calc(calc(var(--x-2) - var(--x-1)) + calc(var(--range-size) * var(--handle-size)));
left:var(--x-1);
background:var(--clr-prim);
z-index:1;
border-radius:50px;
}
.handle {
width:calc(var(--range-size) * var(--handle-size));
height:calc(var(--range-size) * var(--handle-size));
background:#fff;
position:absolute;
box-shadow:var(--shadow);
border-radius:50%;
top:50%;
transform:translateY(-50%);
z-index:2;
cursor:grab;
&:active {
cursor:grabbing;
}
&.left {
left:var(--x-1);
}
&.right {
left:var(--x-2);
}
&::after {
content:'$'attr(data-value);
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
}
}
}
then
window.addEventListener('DOMContentLoaded', () => {
let dualRangeElement = document.getElementById('dual-selector')
new dualRangeSlider(dualRangeElement, customCallbackFunc)
});
1.0.39
3 years ago
1.0.40
3 years ago
1.0.41
3 years ago
1.0.38
3 years ago
1.0.37
3 years ago
1.0.36
3 years ago
1.0.35
3 years ago
1.0.34
3 years ago
1.0.33
3 years ago
1.0.29
3 years ago
1.0.32
3 years ago
1.0.31
3 years ago
1.0.30
3 years ago
1.0.28
3 years ago
1.0.27
3 years ago
1.0.26
3 years ago
1.0.25
3 years ago
1.0.24
3 years ago
1.0.23
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago