noUiSlider, by default, comes with a design with large handles and box shadows. In general, larger handles make range sliders easier to use on mobile devices and touch screens.
It is recommended to use the default stylesheet, overriding where necessary, as a starting point when re-styling noUiSlider.
When the slider handles are restyled to be smaller, .noUi-touch-area should be styled to be larger, to be easier to click or touch. The sliders in this example show the larger touch area when hovered.
padding can be added to .noUi-target to contain handles within the slider's width.
See the documentation on styling for further tips and an overview of classes.
<div id="slider"></div>
<div id="slider-fit"></div>
<div class="slider-styled" id="slider-round"></div>
<div class="slider-styled" id="slider-square"></div>