Slider not working well in RTL

[Stevemoretz]

Hello, I am using FacetWP which uses this library internally, the version is :

/*! noUiSlider - 15.6.1 custom - 2022-09-06 */

Here's my slider in LTR:

Here's my slider in RTL:

In the RTL I have no knob on the left side and, and the drag doesn't work at all.

Here are the options:

connect: true
range: {min: 1, max: 4}
start: (2) [2, 3]
step: 1

Here's the html in RTL:

<div class="facetwp-facet facetwp-facet-property_rooms facetwp-type-slider" data-name="property_rooms" data-type="slider">
   <div class="facetwp-slider-wrap">
      <div class="facetwp-slider noUi-target noUi-rtl noUi-horizontal noUi-txt-dir-rtl ready">
         <div class="noUi-base">
            <div class="noUi-connects">
               <div class="noUi-connect" style="transform: translate(33.3333%, 0px) scale(0.333333, 1);"></div>
            </div>
            <div class="noUi-origin" style="transform: translate(66.6667%, 0px); z-index: 5;">
               <div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="1.0" aria-valuemax="3.0" aria-valuenow="2.0" aria-valuetext="2.00">
                  <div class="noUi-touch-area"></div>
               </div>
            </div>
            <div class="noUi-origin" style="transform: translate(33.3333%, 0px); z-index: 4;">
               <div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="2.0" aria-valuemax="4.0" aria-valuenow="3.0" aria-valuetext="3.00">
                  <div class="noUi-touch-area"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <span class="facetwp-slider-label">2 — 3</span>
   <div><input type="button" class="facetwp-slider-reset" value="Reset"></div>
</div>

Here's LTR:

<div class="facetwp-facet facetwp-facet-property_rooms facetwp-type-slider" data-name="property_rooms" data-type="slider">
   <div class="facetwp-slider-wrap">
      <div class="facetwp-slider noUi-target noUi-rtl noUi-horizontal noUi-txt-dir-ltr ready">
         <div class="noUi-base">
            <div class="noUi-connects">
               <div class="noUi-connect" style="transform: translate(33.3333%, 0px) scale(0.333333, 1);"></div>
            </div>
            <div class="noUi-origin" style="transform: translate(-33.3333%, 0px); z-index: 5;">
               <div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="1.0" aria-valuemax="3.0" aria-valuenow="2.0" aria-valuetext="2.00">
                  <div class="noUi-touch-area"></div>
               </div>
            </div>
            <div class="noUi-origin" style="transform: translate(-66.6667%, 0px); z-index: 4;">
               <div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="2.0" aria-valuemax="4.0" aria-valuenow="3.0" aria-valuetext="3.00">
                  <div class="noUi-touch-area"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <span class="facetwp-slider-label">2 — 3</span>
   <div><input type="button" class="facetwp-slider-reset" value="Reset"></div>
</div>

Looks like the different is in -66 and 66 and -33 and 33, when I add - myself to html myself I get the right look in RTL too

[Stevemoretz]

Took me the whole day but here's the solution looks like the knobs with class .noUi-handle have right: -10px but need left: 10px

[dir="rtl"] .noUi-horizontal .noUi-handle{
    left: -10px;
    right: unset;
}

Amazingly this was the only thing needed to fix this! Works great with and without direction: "rtl" option of this library!

[leongersen]

I just checked/tested this on the default stylesheet, and RTL documents are handled correctly. It seems like the custom stylesheet that's used here overrides styles, but does not handle RTL styling correctly.

[github-actions[bot]]

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.