How can I apply Bootstrap's range input style to noUiSlider?

Question

How can I use the Bootstrap style of the input range on the noUiSlider? Specifically, changing the handle to a circle and the range it slides on. Below an example of the noUiSlider and the bootstrap slider.

 var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, step: 1, range: { 'min': 0, 'max': 100 }});

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.css" integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> noUiSlider: <div id="slider" ref="slider"></div> bs Slider: <input type="range" class="form-range"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js" integrity="sha512-1mDhG//LAjM3pLXCJyaA+4c+h5qmMoTc7IuJyuNNPaakrWT9rVTxICK4tIizf7YwJsXgDC2JP74PGCc7qxLAHw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 1

The styling of the noUiSlider is super customizable and the documentation should get you very close to what you want. Here is the example CSS code from the docs for a rounded slider and custom range background color

#slider-round {
    height: 10px;
}

#slider-round .noUi-connect {
    background: #c0392b;
}

#slider-round .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
}

Getting the slider looking exactly like Bootstrap's would require a lot of effort in studying the CSS of both, finding common classes in charge of similar inner elements/components, and overriding the noUiSlider CSS with Bootstrap's.