JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form_inputs">
<div class="constr_typef">
<div class="construction-area noUi-huge noUi-huge-horizontal">
<div class="construction-area__slider-two construction-area-slder-two" id="slider-area_two"></div>
<div class="construction-area__output-two">
Высота = <span class="construction-area__output-value-two"><input type="text" value="Высота" name="constr_height"></span>
</div>
</div>
</div>
</div>
</fieldset>
<p class="submit"><button type="submit" class="next_popup">Далее</button></p>
</div>
</div>
CSS
.construction-area-two {
width: 100%;
margin: auto;
padding: 2rem;
box-sizing: border-box;
}
.construction-area__slider-two {
margin-bottom: 3.5rem;
}
.construction-area__output-two {
padding-top: 68px;
font-family: Geometric;
font-size: 21px;
text-align: center;
text-transform: uppercase;
color: #343434;
}
.construction-area__output-value-two {
font-weight: 600;
font-size: 40px;
color: #343434;
}
JavaScript
sliderArea.noUiSlider.on('update', function( values, handle ) {
areaOutputValue.textContent = values[handle];
});
var hugeSlider = document.getElementById('slider-huge');
var sliderAreatwo = document.getElementById('slider-area_two');
var areaOutputValuetwo = document.querySelector('.construction-area__output-value-two');
noUiSlider.create(sliderAreatwo, {
start: 1,
tooltips: true,
step: 1,
range: {
'min': 2,
'20%': 2.2,
'40%': 2.4,
'60%': 2.6,
'80%': 2.8,
'max': 3
},
pips: {
mode: 'count',
values: 6,
density: 20,
stepped: true
}
});
sliderAreatwo.noUiSlider.on('update', function( values, handle ) {
areaOutputValue.textContent = values[handle];
});