Add support for reverse in sliders

Author: KoolADE85

components/dash-core-components/src/components/css/dropdown.css

@@ -44,6 +44,10 @@
     height: 100%;
 }
 
+.dash-dropdown:focus {
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
 .dash-dropdown:disabled {
     opacity: 0.6;
     cursor: not-allowed;

components/dash-core-components/src/fragments/RangeSlider.tsx

@@ -39,6 +39,7 @@ export default function RangeSlider(props: RangeSliderProps) {
         allowCross,
         pushable,
         count,
+        reverse,
     } = props;
 
     // For range slider, we expect an array of values
@@ -481,6 +482,7 @@ export default function RangeSlider(props: RangeSliderProps) {
                             step={stepValue}
                             disabled={disabled}
                             orientation={vertical ? 'vertical' : 'horizontal'}
+                            inverted={reverse}
                             data-included={included !== false}
                             minStepsBetweenThumbs={
                                 typeof pushable === 'number'
@@ -498,14 +500,16 @@ export default function RangeSlider(props: RangeSliderProps) {
                                     renderedMarks,
                                     !!vertical,
                                     minMaxValues,
-                                    !!dots
+                                    !!dots,
+                                    !!reverse
                                 )}
                             {dots &&
                                 stepValue &&
                                 renderSliderDots(
                                     stepValue,
                                     minMaxValues,
-                                    !!vertical
+                                    !!vertical,
+                                    !!reverse
                                 )}
                             {/* Render thumbs with tooltips for each value */}
                             {value.map((val, index) => {

components/dash-core-components/src/types.ts

@@ -176,6 +176,11 @@ export interface SliderProps extends BaseComponentProps<SliderProps> {
      */
     included?: boolean;
 
+    /**
+     * If the value is true, the slider is rendered in reverse.
+     */
+    reverse?: boolean;
+
     /**
      * Configuration for tooltips describing the current slider value
      */
@@ -277,6 +282,11 @@ export interface RangeSliderProps extends BaseComponentProps<RangeSliderProps> {
      */
     included?: boolean;
 
+    /**
+     * If the value is true, the slider is rendered in reverse.
+     */
+    reverse?: boolean;
+
     /**
      * Configuration for tooltips describing the current slider values
      */

components/dash-core-components/src/utils/sliderRendering.tsx

@@ -58,11 +58,19 @@ export const renderSliderMarks = (
     renderedMarks: SliderMarks,
     vertical: boolean,
     minMaxValues: {min_mark: number; max_mark: number},
-    dots: boolean
+    dots: boolean,
+    reverse = false
 ) => {
     return Object.entries(renderedMarks).map(([position, mark]) => {
         const pos = parseFloat(position);
-        const thumbPosition = getRadixThumbPosition(pos, minMaxValues);
+
+        // When reversed, use the inverted value for positioning
+        const displayPos = reverse
+            ? minMaxValues.max_mark - pos + minMaxValues.min_mark
+            : pos;
+
+        const thumbPosition = getRadixThumbPosition(displayPos, minMaxValues);
+
         const style = vertical
             ? {
                   bottom: `calc(${thumbPosition.percentage}% + ${thumbPosition.offset}px - 13px)`,
@@ -95,7 +103,8 @@ export const renderSliderMarks = (
 export const renderSliderDots = (
     stepValue: number,
     minMaxValues: {min_mark: number; max_mark: number},
-    vertical: boolean
+    vertical: boolean,
+    reverse = false
 ) => {
     if (stepValue <= 1) {
         return null;
@@ -117,7 +126,17 @@ export const renderSliderDots = (
         },
         (_, i) => {
             const dotValue = minMaxValues.min_mark + i * stepValue;
-            const thumbPosition = getRadixThumbPosition(dotValue, minMaxValues);
+
+            // When reversed, use the inverted value for positioning
+            const displayValue = reverse
+                ? minMaxValues.max_mark - dotValue + minMaxValues.min_mark
+                : dotValue;
+
+            const thumbPosition = getRadixThumbPosition(
+                displayValue,
+                minMaxValues
+            );
+
             const dotStyle = vertical
                 ? {
                       bottom: `calc(${thumbPosition.percentage}% + ${thumbPosition.offset}px)`,