[Core] MultiSlider component

packages/core/src/common/classes.ts

@@ -187,10 +187,13 @@ export const SELECT = `${NS}-select`;
 export const SKELETON = `${NS}-skeleton`;
 
 export const SLIDER = `${NS}-slider`;
+export const SLIDER_AXIS = `${SLIDER}-axis`;
 export const SLIDER_HANDLE = `${SLIDER}-handle`;
 export const SLIDER_LABEL = `${SLIDER}-label`;
+export const SLIDER_TRACK = `${SLIDER}-track`;
 export const SLIDER_PROGRESS = `${SLIDER}-progress`;
-export const RANGE_SLIDER = `${NS}-range-slider`;
+export const START = `${NS}-start`;
+export const END = `${NS}-end`;
 
 export const SPINNER = `${NS}-spinner`;
 export const SPINNER_HEAD = `${SPINNER}-head`;

packages/core/src/common/errors.ts

@@ -68,6 +68,7 @@ export const RADIOGROUP_WARN_CHILDREN_OPTIONS_MUTEX =
 export const SLIDER_ZERO_STEP = ns + ` <Slider> stepSize must be greater than zero.`;
 export const SLIDER_ZERO_LABEL_STEP = ns + ` <Slider> labelStepSize must be greater than zero.`;
 export const RANGESLIDER_NULL_VALUE = ns + ` <RangeSlider> value prop must be an array of two non-null numbers.`;
+export const MULTISLIDER_INVALID_CHILD = ns + ` <MultiSlider> children must be <SliderHandle>s or <SliderTrackStop>s`;
 
 export const TOASTER_CREATE_NULL =
     ns +

packages/core/src/common/utils.ts

@@ -50,13 +50,13 @@ export interface INamed {
     name?: string;
 }
 
-export function getDisplayName(ComponentClass: React.ComponentClass | INamed) {
-    return (ComponentClass as React.ComponentClass).displayName || (ComponentClass as INamed).name || "Unknown";
+export function getDisplayName(ComponentClass: React.ComponentType | INamed) {
+    return (ComponentClass as React.ComponentType).displayName || (ComponentClass as INamed).name || "Unknown";
 }
 
 export function isElementOfType<P = {}>(
     element: any,
-    ComponentClass: React.ComponentClass<P>,
+    ComponentClass: React.ComponentType<P>,
 ): element is React.ReactElement<P> {
     return element != null && element.type === React.createElement(ComponentClass).type;
 }

packages/core/src/components/index.ts

@@ -52,6 +52,8 @@ export * from "./text/text";
 export * from "./popover/popover";
 export * from "./portal/portal";
 export * from "./progress-bar/progressBar";
+export * from "./slider/handleProps";
+export * from "./slider/multiSlider";
 export * from "./slider/rangeSlider";
 export * from "./slider/slider";
 export * from "./spinner/spinner";

packages/core/src/components/slider/_slider.scss

@@ -41,17 +41,25 @@ $track-height: $track-size !default;
 .#{$ns}-slider-progress {
   @include slider-track-orientation($handle-size, $track-size, $vertical: false);
   position: absolute;
+}
+
+.#{$ns}-slider-track {
   border-radius: $pt-border-radius;
+  overflow: hidden;
+}
+
+.#{$ns}-slider-progress {
   background: rgba($gray1, 0.2);
 
   .#{$ns}-dark & {
     background: rgba($black, 0.5);
   }
-}
 
-.#{$ns}-slider-progress,
-.#{$ns}-dark .#{$ns}-slider-progress {
-  background: $pt-intent-primary;
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      background-color: $color;
+    }
+  }
 }
 
 .#{$ns}-slider-handle {
@@ -126,6 +134,26 @@ $track-height: $track-size !default;
       box-shadow: none;
     }
   }
+
+  &.#{$ns}-start,
+  &.#{$ns}-end {
+    width: $handle-size / 2;
+  }
+
+  &.#{$ns}-start {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &.#{$ns}-end {
+    margin-left: $handle-size / 2;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    .#{$ns}-slider-label {
+      margin-left: 0;
+    }
+  }
 }
 
 .#{$ns}-slider-label {
@@ -138,31 +166,6 @@ $track-height: $track-size !default;
   font-size: $pt-font-size-small;
 }
 
-.#{$ns}-range-slider {
-  .#{$ns}-slider-handle {
-    width: $handle-size / 2;
-
-    &:first-of-type {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-of-type {
-      margin-left: $handle-size / 2;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      .#{$ns}-slider-label {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .#{$ns}-slider-progress {
-    border-radius: 0;
-  }
-}
-
 .#{$ns}-slider.#{$ns}-vertical {
   @include slider-orientation($pt-input-height-large, $vertical: true);
 
@@ -186,20 +189,15 @@ $track-height: $track-size !default;
       margin-top: -$handle-size / 2;
       margin-left: 0;
     }
-  }
-}
 
-.#{$ns}-range-slider.#{$ns}-vertical {
-  .#{$ns}-slider-handle {
-    margin-left: 0;
-    width: $handle-size;
-    height: $handle-size / 2;
-
-    .#{$ns}-slider-label {
+    &.#{$ns}-end,
+    &.#{$ns}-start {
       margin-left: 0;
+      width: $handle-size;
+      height: $handle-size / 2;
     }
 
-    &:first-of-type {
+    &.#{$ns}-start {
       border-top-left-radius: 0;
       border-bottom-right-radius: $pt-border-radius;
 
@@ -208,7 +206,7 @@ $track-height: $track-size !default;
       }
     }
 
-    &:last-of-type {
+    &.#{$ns}-end {
       margin-bottom: $handle-size / 2;
       border-top-left-radius: $pt-border-radius;
       border-bottom-left-radius: 0;