<div class="size-slider " data-min="0" data-max="140" data-initial="30">
<label class="size-slider__label text-small" for="size-slider">
size
</label>
<div class="size-slider__inner">
<div>
0 pt
</div>
<div class="size-slider__slider"></div>
<div>
140 pt
</div>
<input id="size-slider" type="number" name="detail-parameters" class="size-slider__input-value" value="30">
</div>
</div>
<div class="size-slider {{ class }} {{ modifier }}" data-min="{{ data.rangeMin }}" data-max="{{ data.rangeMax }}" data-initial="{{ data.rangeInitial }}">
{% if data.label %}
<label class="size-slider__label text-small" for="{{ data.id }}">
{{ data.label }}
</label>
{% endif %}
<div class="size-slider__inner">
<div>
{{ data.rangeMin }} {{ data.rangeUnit }}
</div>
<div class="size-slider__slider"></div>
<div>
{{ data.rangeMax }} {{ data.rangeUnit }}
</div>
<input
id="{{ data.id }}"
type="number"
name="{{ data.name }}"
class="size-slider__input-value"
value="{{ data.rangeInitial }}">
</div>
</div>
{
"language": "en-US",
"data": {
"id": "size-slider",
"name": "detail-parameters",
"label": "size",
"rangeUnit": "pt",
"rangeMin": 0,
"rangeMax": 140,
"rangeInitial": 30
}
}
.size-slider {
display: none;
@include bp(sm-min) {
display: block;
}
}
.size-slider__input-value {
display: none;
}
.size-slider__label {
display: block;
text-transform: uppercase;
opacity: .6;
line-height: 24px;
@include bp(sm-min) {
margin-bottom: 4px;
}
}
.size-slider__inner {
display: flex;
align-items: center;
}
.size-slider__slider {
background: none;
box-shadow: none;
border: none;
width: 173px;
height: 16px;
margin: 0 9px;
cursor: pointer;
&:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 7px;
height: 1px;
background-color: var(--color-brand);
transition: background-color $transition-duration $transition-easing;
}
}
.noUi-handle {
.noUi-horizontal & {
background-color: transparent;
box-shadow: none;
border: none;
width: 32px;
right: -16px;
height: 16px;
top: 0;
&:after,
&:before {
content: none;
}
}
}
.noUi-touch-area {
cursor: pointer;
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
height: 16px;
width: 1px;
background-color: var(--color-brand);
transition: background-color $transition-duration $transition-easing;
}
}
import 'nouislider/distribute/nouislider.css';
import './size-slider.scss';
import noUiSlider from 'nouislider';
import Component from '@component';
interface ISizeSliderSettings {
inputClass: string;
min: number;
initial: number;
max: number;
}
export default class SizeSlider extends Component {
static initSelector: string = '.size-slider';
settings: ISizeSliderSettings;
rangeInputValue: JQuery;
sliderContainer: noUiSlider.noUiSlider;
rangeMin: number;
rangeMax: number;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
initial: null,
inputClass: 'size-slider__input-value',
max: null,
min: null,
}, this.element.data());
this.rangeInputValue = this.element.find('.' + this.settings.inputClass);
const rangeElement: HTMLElement = this.element.find('.size-slider__slider')[0];
const rangeInitial: number = this.settings.initial;
const rangeMin: number = this.settings.min;
const rangeMax: number = this.settings.max;
this.sliderContainer = noUiSlider.create(rangeElement, {
range: {
max: rangeMax,
min: rangeMin,
},
start: rangeInitial,
step: 1,
});
this.init();
}
init(): void {
this.sliderContainer.on('slide', this.slideHandler.bind(this));
}
slideHandler(values: string[]): void {
this.rangeInputValue.val(parseInt(values[0]));
this.rangeInputValue.trigger('input');
}
}