Menu
I have attempted to set the width of a NoUiSlider via the css:
.noUi-horizontal .noUi-handle {
width:8px;
height:25px;
left: 0px;
top: -8px;
border: 0px solid #000000;
border-radius: 0px;
background: #000;
cursor: default;
box-shadow: none; /*inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;*/ }
.noUi-handle {
left:0px; }
.noUi-active {
box-shadow: none /*inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ }
.noUi-handle:before, .noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 0px;
background: #000000;
left: 14px;
top: 6px; }
.noUi-handle:after {
left: 0px; }
Thought this does give me the narrow handle that I want, the handle no longer covers the transition in the track between white and green, but rather that transition is exposed, unlike when you don't change the handle width.
448
asked Sep 02 '25 05:09
One of the complications of using nouislider is getting a complete answer. I've made one below incorporating lg102's response, and added a few things to make it more obvious. I needed to use !important in the CSS to make some properties take effect.
Something like this example would make a good addition to nouislider's website doc, which is already way better than the average doc for a JS library.
<head>
<script type="text/javascript" src="nouislider.js"></script>
<link href="nouislider.css" rel="stylesheet">
<script>
function init(){
noUiSlider.create(slider_id, {
start: [25, 75],
connect: [false, true, false],
range: {
'min': 0,
'max': 100
}
})
}
</script>
<style>
.noUi-handle {
width: 10px !important;
right: -5px !important; /* must be (width / 2) * -1 */
background: #AA00AA;
}
</style>
</head>
<body onload="init()" >
<h3>slide test1</h3>
<div id="slider_id" style="width:300px;height:20px;"/>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With