Some work on slider component

Author: craquet

package-lock.json

@@ -36,6 +36,7 @@
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-popover": "^1.1.4",
         "@radix-ui/react-select": "^2.1.4",
+        "@radix-ui/react-slider": "^1.2.2",
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.7",
         "@types/luxon": "^3.4.2",

package.json

@@ -26,7 +26,7 @@ import { PlaceholderResultView } from "@/components/result/PlaceholderResultView
  *
  * #### ⚠️ Warning
  *
- * Make sure your configuration is memoized or defined outside of any components
+ * Make sure your configuration is memoized or defined outside any components
  *
  *
  * #### 🖌️ Customization

src/components/FairDOElasticSearch.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>>(
+    ({ className, ...props }, ref) => (
+        <SliderPrimitive.Root
+            ref={ref}
+            className={cn("rfs-relative rfs-flex rfs-w-full rfs-touch-none rfs-select-none rfs-items-center", className)}
+            {...props}
+        >
+            <SliderPrimitive.Track className="rfs-relative rfs-h-2 rfs-w-full rfs-grow rfs-overflow-hidden rfs-rounded-full rfs-bg-secondary">
+                <SliderPrimitive.Range className="rfs-absolute rfs-h-full rfs-bg-primary" />
+            </SliderPrimitive.Track>
+            <SliderPrimitive.Thumb className="rfs-block rfs-h-5 rfs-w-5 rfs-rounded-full rfs-border-2 rfs-border-primary rfs-bg-background rfs-ring-offset-background rfs-transition-colors focus-visible:rfs-outline-none focus-visible:rfs-ring-2 focus-visible:rfs-ring-ring focus-visible:rfs-ring-offset-2 disabled:rfs-pointer-events-none disabled:rfs-opacity-50">
+                <span className=" rfs-pointer-events-none rfs-text-muted-foreground rfs-text-sm -rfs-top-5 -rfs-translate-x-1/2 rfs-left-1/2 rfs-absolute">
+                    {props.value?.[0]}
+                </span>
+            </SliderPrimitive.Thumb>
+            <SliderPrimitive.Thumb className="rfs-block rfs-h-5 rfs-w-5 rfs-rounded-full rfs-border-2 rfs-border-primary rfs-bg-background rfs-ring-offset-background rfs-transition-colors focus-visible:rfs-outline-none focus-visible:rfs-ring-2 focus-visible:rfs-ring-ring focus-visible:rfs-ring-offset-2 disabled:rfs-pointer-events-none disabled:rfs-opacity-50">
+                <span className="rfs-pointer-events-none rfs-text-muted-foreground rfs-text-sm -rfs-bottom-5 -rfs-translate-x-1/2 rfs-left-1/2 rfs-absolute">
+                    {props.value?.[1]}
+                </span>
+            </SliderPrimitive.Thumb>
+        </SliderPrimitive.Root>
+    )
+)
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

src/components/ui/slider.tsx

@@ -15,7 +15,6 @@ export interface FairDOCoreFacetConfig {
  * Numeric range facet. Pass possible ranges to the ranges property
  */
 export interface FairDONumericRangeFacetConfig extends FairDOCoreFacetConfig {
-    renderer: string
     type: "numeric"
 
     /**
@@ -29,13 +28,16 @@ export interface FairDONumericRangeFacetConfig extends FairDOCoreFacetConfig {
  * Date range facet that automatically renders available options
  */
 export interface FairDODateRangeFacetConfig extends FairDOCoreFacetConfig {
-    renderer: string
     type: "date_time" | "date_year"
 }
 
+export interface FairDOSliderFacetConfig extends FairDOCoreFacetConfig {
+    type: "min-max-slider"
+}
+
 export type FairDODefaultFacetConfig = FairDOCoreFacetConfig
 
-export type FairDOFacetConfig = FairDONumericRangeFacetConfig | FairDODefaultFacetConfig | FairDODateRangeFacetConfig
+export type FairDOFacetConfig = FairDONumericRangeFacetConfig | FairDODefaultFacetConfig | FairDODateRangeFacetConfig | FairDOSliderFacetConfig
 
 export interface FairDOIndexConfig {
     /**

src/config/FairDOConfig.ts

@@ -111,13 +111,20 @@ export class FairDOConfigBuilder {
                         type: "range",
                         ranges: facetRanges
                     }
-                } else if ("type" in n && n.type?.startsWith("date_")) {
+                } else if ("type" in n && (n.type === "date_time" || n.type === "date_year")) {
                     const facetRanges = this.buildDateRangeFacet(n)
                     acc[n.key] = {
                         ...n,
                         type: "range",
                         ranges: facetRanges
                     }
+                } else if ("type" in n && n.type === "min-max-slider") {
+                    // TODO work out how to get slider min and max values
+                    acc[n.key] = {
+                        ...n,
+                        type: "value",
+                        size: 100
+                    }
                 } else {
                     // no specific range facet, use default arguments
                     acc[n.key] = {

src/config/FairDOConfigBuilder.ts

@@ -80,7 +80,8 @@ const demoConfigWithCompound: FairDOConfig = {
             facets: [
                 {
                     key: "Compound.keyword",
-                    label: "Compound"
+                    label: "Compound",
+                    type: "min-max-slider"
                 }
             ],
             resultFields: [], // Leave empty to get all fields