How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using 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; }

Despite achieving the slim handle desired, it's causing an issue where the handle no longer conceals the color transition between white and green in the track. Instead, the transition is exposed when adjusting the handle width.

javascriptcssnouislider

Answer №1

Dealing with nouislider can be tricky, especially when you want to create a comprehensive solution. I have put together an example below based on lg102's input, and made some adjustments to enhance clarity. I had to use !important in the CSS to ensure certain properties were applied.

An example like this would be beneficial to include in nouislider's official documentation, which is already much more informative compared to other JavaScript library docs.

<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>

Answer №2

Adjusting the left value for the .noUi-handle to 0, as shown below:

.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;
}

If you are changing the width to 8, then the right (or left) should be set to -4 (which is half of 8).

The minimal changes required include adding:

width: 10px;
right: -5px;

You can experiment with this modification by accessing the documentation link provided below:

https://i.stack.imgur.com/KpLEf.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent incorrect data input by users - Enhancing JavaScript IP address validation

I have been trying to create a masked input field for entering IP addresses, but every solution I come across seems to have some flaws. The best solution I found so far is , but it still allows values higher than 255 to be entered. It works fine initially ...

javascriptjquerymaskedinput

What is the best way to switch a boolean state in React using TypeScript?

Hey there! I'm diving into the world of React and TypeScript. My goal is to toggle a boolean state (true/false) using a handler function. While I've come across solutions in ES6, I'm struggling to grasp how it can be implemented in TypeScri ...

javascriptreactjstypescriptreact-hooks

I keep encountering an error in the where clause when trying to update MySQL. What could be

I encountered an issue stating Unknown column 'CR0001' in 'where clause' while executing my code. Strangely, the error seems to be related to the id_scooter column rather than CR0001. Below is the snippet of my code: var update = "UPDA ...

javascriptmysqlnode.js

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

javascriptjqueryhtmlcssfirefox

Exploring the capabilities of multiple nested controllers in AngularJS

I am facing a challenge that I haven't been able to find a solution for online. My search form includes multiple instances of a common controller used for typeahead/autocomplete searches. Each controller is set up with different parameters for search ...

javascriptangularjs

What is the best way to transfer information between two components in React.js by simply clicking a button?

One of the challenges I am currently facing involves rendering data from the Pokemon API in a table. Within this table, there is a button that allows users to select specific data when pressed. My goal is to send this selected data from the table component ...

javascriptreactjsmaterial-uireact-props

Include the url of the html file in your JavaScript code

I have a piece of code that I want to include in my JavaScript instead of HTML. The code is as follows: <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script> Since all my functions are written in JavaScript, I ...

javascripthtml

Facing a dilemma: Javascript not updating HTML image source

I am facing an issue while attempting to modify the source of my HTML image element. Despite using document.getElementId('image') in my code, I am unable to make it work as intended. Surprisingly, there are no errors displayed. Interestingly, whe ...

javascripthtmlimage

Vanished were the empty voids within our

It seems that the spaces between words have mysteriously vanished in a font I am currently using. Take a look at this website: I am utilizing a slightly modified Twitter Bootstrap with Google Web fonts, and the font causing the issue is Oswald from Googl ...

csstwitter-bootstrapgoogle-webfontsletter-spacing

I am experiencing an issue where the Javascript keydown event does not recognize the character "@" in the EDGE browser

Currently, I am developing a mentioning directive that displays a list of users when the user types in an input field (a div with contentEditable=true). The user can then insert the name of the desired user in a specific format. The list is supposed to be ...

javascriptangulartypescript

Limiting the size of images within a specific section using CSS

When using CSS, I know how to resize images with the code snippets below: img {width:100%; height: auto; } img {max-width: 600px} While this method works effectively, it applies to every image on the page. What I really need is for some images to be ...

javascripthtmlcss

CSS only rendering in Firefox, not displaying in other browsers

After all the hard work I put into my website, I have encountered an issue while conducting browser compatibility checks. There seems to be something strange happening with the CSS of a specific link. I have applied a CSS class and included some PHP code ...

phphtmlcsscross-browser

The Double Negation operator

While reading a book, I came across this code snippet: !!(document.all && document.uniqueID); I'm wondering why the double not operator is used here. Doesn't the && operator already convert the result to a Boolean? ...

javascriptbooleannegation

Sorting through an array of objects based on a key and value that match another object

Is it possible to filter or query an array with the following structure? [ { 'xml:id': 'Name1', sex: { '$t': 'M' }, occupation: { n: 1 ...

javascriptnode.js

increasing the size of the input thumb compared to the others

Hello fellow React developers, I'm currently learning by coding and I have a question about a slider. I'm trying to make the thumb of the slider bigger, but when I increase its size it doesn't fully display within the input area (as you can ...

javascripthtmlreactjsinputmaterial-ui

Determine the status of caps lock with a single click of a button

I am working on an application that includes a textbox and a button. I need the application to indicate whether the Caps Lock key is activated or deactivated when a user types text in the textbox and clicks the button. ...

javascriptasp.net

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema

The toggleClass() function is only toggling between a single class

I'm currently facing an issue with a jQuery/Angular function that is triggered on click. <a ng-click="like()" href="#" class="like like--yes"></a> Essentially, my goal is to switch between the classes like--yes and like--no when the like ...

javascriptjqueryangularjs

JS: Issue with iterating over objects

Within my JavaScript code, there exists an object named box_object with the following structure: ({ id:"3", text:"this is a box object", connection_parent:["1", "2"], connection_child:["5", "6"], connectiondata_child:{ 0:{id:"5", ...

javascriptjqueryjavascript-objects

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component