search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.66k stars 659 forks source link

tooltips going beyond slider width #1165

Closed Beppe closed 2 years ago

Beppe commented 2 years ago

Is there a correct way to have tooltips to not trespass the slider size limits (0 - 100%)? I cannot find any example or SO question about it.

Use case: My slider is into a column and there is not enough padding for the toltip

Beppe commented 2 years ago

My shortpath to acheive the result is this one, but I feel there must be something better (at the end of the "Merging overlapping tooltips" example update callback)

 ```
  var sliderBBOx=slider.getBoundingClientRect();
       tooltips.forEach(tt =>{ 
        tt.style.transform=``;
        var ttBBOx=tt.getBoundingClientRect();                
        var dXl=sliderBBOx.left-ttBBOx.left;
        var dXr=sliderBBOx.right-ttBBOx.right;          

        if(dXl>0){
            tt.style.transform=`translateX(${dXl+ttBBOx.width/2}px)`;
        }
        if(dXr<0){
            tt.style.transform=`translateX(${dXr+ttBBOx.width/2}px)`;
        }

       })
github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.