For Nouislider, How Do I Set The Width Of A Handle/thumb?
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 #
Solution 1:
You are setting the left value for .noUi-handle to 0. The default CSS for LTR sliders looks like this:
.noUi-handle {
width: 34px;
height: 28px;
left: auto;
right: -17px; /* The 17 here is half of the 34 width. The - pulls it in the other direction */top: -6px;
}
Since you are changing the width to 8, you should set the right (or left, depending on the page orientation) to -4 (8/2).
The minimum changes to make are adding:
width: 10px;
right: -5px;
You can try this out in the documentation:
Solution 2:
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><scripttype="text/javascript"src="nouislider.js"></script><linkhref="nouislider.css"rel="stylesheet"><script>functioninit(){
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><bodyonload="init()" ><h3>slide test1</h3><divid="slider_id"style="width:300px;height:20px;"/></body>
Post a Comment for "For Nouislider, How Do I Set The Width Of A Handle/thumb?"