JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class=" sidebar__filter_item_content-last sidebar-price-f">
<div class="filter_label_item">
<label>
<input class="checkbox" data-price-to="3000" type="radio" name="price-interval">
<span class="checkbox-custom"></span>
<span class="label">до 3 000
</span>
</label>
</div>
<div class="filter_label_item">
<label>
<input class="checkbox" data-price-from="3000" data-price-to="7000" type="radio" name="price-interval">
<span class="checkbox-custom"></span>
<span class="label">от 3 000 до 7 000
</span>
</label>
</div>
<div class="filter_label_item">
<label>
<input class="checkbox" data-price-from="7000" data-price-to="15000" type="radio" name="price-interval">
<span class="checkbox-custom"></span>
<span class="label">от 7 000 до 15 000
</span>
</label>
</div>
<div class="filter_label_item">
<label>
<input class="checkbox" data-price-from="15000" data-price-to="50000" type="radio" name="price-interval">
<span class="checkbox-custom"></span>
<span class="label">от 15 000 до 50 000
</span>
</label>
</div>
<div class="filter_label_item">
<label>
<input class="checkbox" data-price-from="50000" type="radio" name="price-interval">
<span class="checkbox-custom"></span>
<span class="label">от 50 000
</span>
</label>
</div>
<div class="filter__item-row">
<div class="slider_input_wr">
<p>От</p>
<input type="text" data-pricem="" class="slider_input minCost">
<p>До</p>
<input type="text" class="slider_input maxCost">
<p>руб.</p>
</div>
<div class="slider"></div>
</div>
</div>
CSS
body {
padding: 20px;
}
JavaScript
const interval = {
min: 100,
max: 100000,
};
function setInputValues([ min, max ]) {
$min.val(min);
$max.val(max);
}
function updateInputsFromSlider() {
setInputValues($slider.slider('values'));
}
const $min = $('input.minCost');
const $max = $('input.maxCost');
const $slider = $('.slider').slider({
...interval,
values: Object.values(interval),
range: true,
stop: updateInputsFromSlider,
slide: updateInputsFromSlider,
});
$min.add($max).on('input', function() {
const values = $('input.minCost, input.maxCost')
.get()
.map(n => Math.max(interval.min, Math.min(interval.max, n.value)))
.sort((a, b) => a - b);
setInputValues(values);
$slider.slider('values', values);
});
$('.sidebar-price-f input[type="radio"]').on('change', function() {
const { priceFrom, priceTo } = this.dataset;
setInputValues([ priceFrom, priceTo ]);
$slider.slider('values', [
priceFrom || $slider.slider('option', 'min'),
priceTo || $slider.slider('option', 'max'),
]);
});
setInputValues(Object.values(interval));