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/[email protected]/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/[email protected]/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.