+
{tickSequence.map((tickValue) => (
))}
diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx
index 958458d0fa8..400b02ac335 100644
--- a/src/components/form/range/range_track.tsx
+++ b/src/components/form/range/range_track.tsx
@@ -146,7 +146,9 @@ export class EuiRangeTrack extends Component
{
const trackClasses = classNames('euiRangeTrack', {
'euiRangeTrack--disabled': disabled,
+ 'euiRangeTrack--hasLevels': levels && !!levels.length,
'euiRangeTrack--hasTicks': tickSequence || ticks,
+ 'euiRangeTrack--compressed': compressed,
});
return (
diff --git a/src/components/form/range/utils.ts b/src/components/form/range/utils.ts
new file mode 100644
index 00000000000..76399a0fd71
--- /dev/null
+++ b/src/components/form/range/utils.ts
@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const EUI_THUMB_SIZE = 16;
+
+export const calculateThumbPosition = (
+ value: number,
+ min: number,
+ max: number,
+ width: number,
+ thumbSize: number = EUI_THUMB_SIZE
+) => {
+ // Calculate the left position based on value
+ const decimal = (value - min) / (max - min);
+ // Must be between 0-100%
+ let valuePosition = decimal <= 1 ? decimal : 1;
+ valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+ const trackWidth = width ?? 0;
+ const thumbToTrackRatio = thumbSize / trackWidth;
+ const trackPositionScale = (1 - thumbToTrackRatio) * 100;
+
+ return valuePosition * trackPositionScale;
+};
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
index 9d9039cc1aa..9b3f4154ceb 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -20,5 +20,5 @@
@import 'panel';
@import '../../../../global_styling/mixins/popover';
@import 'popover';
-@import '../../../../global_styling/mixins/range';
+@import 'range';
@import '../../../../global_styling/mixins/tool_tip';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_range.scss b/src/themes/eui-amsterdam/global_styling/mixins/_range.scss
new file mode 100644
index 00000000000..564c30b4165
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_range.scss
@@ -0,0 +1,58 @@
+// Prefixes are unique in this file
+// sass-lint:disable no-vendor-prefixes
+
+@mixin euiRangeTrackSize($compressed: false) {
+ height: $euiRangeTrackHeight;
+ transition: all $euiAnimSpeedNormal ease-in;
+ width: $euiRangeTrackWidth;
+
+ @if ($compressed) {
+ height: $euiRangeTrackCompressedHeight;
+ }
+}
+
+@mixin euiRangeTrackPerBrowser {
+ &::-webkit-slider-runnable-track { @content; }
+ &::-moz-range-track { @content; }
+ &::-ms-fill-lower { @content; }
+ &::-ms-fill-upper { @content; }
+}
+
+@mixin euiRangeThumbBorder {
+ border: 2px solid $euiRangeThumbBorderColor;
+}
+
+@mixin euiRangeThumbBoxShadow {
+ // sass-lint:disable-block no-color-literals
+ box-shadow: 0 0 0 1px $euiRangeThumbBorderColor,
+ 0 2px 2px -1px rgba($euiShadowColor, .2),
+ 0 1px 5px -2px rgba($euiShadowColor, .2);
+}
+
+@mixin euiRangeThumbFocusBoxShadow {
+ box-shadow: 0 0 0 2px $euiFocusRingColor;
+}
+
+@mixin euiRangeThumbStyle {
+ @include euiRangeThumbBoxShadow;
+ @include euiRangeThumbBorder;
+ cursor: pointer;
+ background-color: $euiRangeThumbBackgroundColor;
+ padding: 0;
+ height: $euiRangeThumbHeight;
+ width: $euiRangeThumbWidth;
+ box-sizing: border-box; // required for firefox or the border makes the width and height to increase
+}
+
+@mixin euiRangeThumbPerBrowser {
+ &::-webkit-slider-thumb { @content; }
+ &::-moz-range-thumb { @content; }
+ &::-ms-thumb { @content; }
+}
+
+
+@mixin euiRangeThumbFocus {
+ @include euiRangeThumbBorder;
+ @include euiRangeThumbFocusBoxShadow;
+ background-color: $euiColorPrimary;
+}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
index d23bfce2075..16def19d7c1 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_form.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
@@ -6,3 +6,18 @@ $euiFormBackgroundReadOnlyColor: $euiColorEmptyShade;
$euiFormControlBoxShadow: 0 0 transparent;
$euiCheckboxBorderRadius: $euiBorderRadiusSmall;
+
+// Range
+$euiRangeTrackColor: $euiColorLightShade;
+$euiRangeHighlightColor: $euiColorDarkShade;
+
+$euiRangeThumbBorderColor: $euiColorEmptyShade;
+$euiRangeThumbBackgroundColor: $euiRangeHighlightColor;
+
+$euiRangeTrackHeight: $euiSizeM / 2;
+$euiRangeTrackCompressedHeight: $euiSizeXS;
+$euiRangeHighlightHeight: $euiRangeTrackHeight;
+$euiRangeHighlightCompressedHeight: $euiRangeTrackCompressedHeight;
+
+$euiRangeHeight: $euiFormControlHeight;
+$euiRangeCompressedHeight: $euiFormControlCompressedHeight;
diff --git a/src/themes/eui-amsterdam/overrides/_color_stops.scss b/src/themes/eui-amsterdam/overrides/_color_stops.scss
new file mode 100644
index 00000000000..645317be0c9
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_color_stops.scss
@@ -0,0 +1,45 @@
+.euiColorStops__addTarget,
+.euiColorStops__addContainer {
+ z-index: 1;
+}
+
+.euiColorStops__addTarget {
+ border: 1px solid $euiColorDarkShade;
+ box-shadow: none;
+}
+
+.euiColorStopThumb.euiRangeThumb:not(:disabled) {
+ // sass-lint:disable-block no-important no-color-literals
+ @include euiRangeThumbBorder;
+ @include euiRangeThumbBoxShadow;;
+
+ &:focus {
+ @include euiRangeThumbFocusBoxShadow;
+ outline: none;
+ }
+
+ // in Chrome/FF/Edge we don't want to focus on click
+ &:focus:not(:focus-visible) {
+ @include euiRangeThumbBoxShadow;
+ outline: none;
+ }
+}
+
+.euiColorStops:not(.euiColorStops-isDisabled) {
+ &:focus {
+ // prevents a flash of the outline in Safari
+ transition-delay: $euiAnimSpeedExtraFast;
+ }
+
+ &:focus:not(:focus-visible) {
+ outline: none;
+ }
+}
+
+.euiColorStops__highlight {
+ color: $euiRangeTrackColor;
+
+ .euiRangeHighlight__progress {
+ background-color: $euiRangeTrackColor;
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_hue.scss b/src/themes/eui-amsterdam/overrides/_hue.scss
new file mode 100644
index 00000000000..30326e03be4
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_hue.scss
@@ -0,0 +1,44 @@
+.euiHue {
+ position: relative;
+ height: $euiSizeM;
+ border-radius: $euiSizeM;
+ margin: $euiSizeS 0;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+
+ &__range {
+ @include euiRangeThumbPerBrowser {
+ // sass-lint:disable-block no-color-literals
+ border: 3px solid $euiRangeThumbBorderColor;
+ box-shadow: 0 2px 2px -1px rgba($euiShadowColor, .2),
+ 0 1px 5px -2px rgba($euiShadowColor, .2);
+ background-color: inherit;
+ }
+
+ top: - $euiSizeM / 2;
+
+ &:focus {
+ @include euiRangeThumbPerBrowser {
+ @include euiRangeThumbFocusBoxShadow;
+ border: 3px solid $euiRangeThumbBorderColor;
+ }
+
+ outline: none;
+ }
+
+ &:focus:not(:focus-visible) {
+ @include euiRangeThumbPerBrowser {
+ // sass-lint:disable-block no-color-literals
+ box-shadow: 0 2px 2px -1px rgba($euiShadowColor, .2),
+ 0 1px 5px -2px rgba($euiShadowColor, .2);
+ }
+ }
+
+ &:focus:focus-visible {
+ outline: none;
+ }
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
index 085ae2b054e..d2c9d36948a 100644
--- a/src/themes/eui-amsterdam/overrides/_index.scss
+++ b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -4,6 +4,7 @@
@import 'button_group';
@import 'call_out';
@import 'code_block';
+@import 'color_stops';
@import 'comment';
@import 'date_picker';
@import 'filter_group';
@@ -11,6 +12,7 @@
@import 'form_control_layout_delimited';
@import 'form_controls';
@import 'header';
+@import 'hue';
@import 'list_group_item';
@import 'image';
@import 'mark';
@@ -20,6 +22,14 @@
@import 'popover';
@import 'progress';
@import 'range';
+@import 'range_draggable';
+@import 'range_highlight';
+@import 'range_levels';
+@import 'range_slider';
+@import 'range_thumb';
+@import 'range_ticks';
+@import 'range_track';
+@import 'range_tooltip';
@import 'side_nav';
@import 'steps';
@import 'tabs';
diff --git a/src/themes/eui-amsterdam/overrides/_range_draggable.scss b/src/themes/eui-amsterdam/overrides/_range_draggable.scss
new file mode 100644
index 00000000000..2e4729f17a5
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_draggable.scss
@@ -0,0 +1,25 @@
+.euiRangeDraggable {
+ &:focus {
+ outline: none;
+
+ ~ .euiRangeThumb {
+ @include euiRangeThumbFocus;
+ }
+ }
+
+ // in Chrome/FF/Edge we don't want to focus on click
+ &:focus:not(:focus-visible) {
+ ~ .euiRangeThumb {
+ @include euiRangeThumbBoxShadow;
+ outline: none;
+ }
+ }
+
+ &:focus-visible {
+ outline: none;
+
+ ~ .euiRangeThumb {
+ @include euiRangeThumbFocus;
+ }
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_range_highlight.scss b/src/themes/eui-amsterdam/overrides/_range_highlight.scss
new file mode 100644
index 00000000000..39f2b3670e6
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_highlight.scss
@@ -0,0 +1,31 @@
+.euiRangeHighlight {
+ z-index: 1;
+ pointer-events: none;
+
+ &__progress {
+ background-color: $euiRangeHighlightColor;
+ border-color: $euiRangeHighlightColor;
+
+ &--hasFocus {
+ background-color: $euiColorPrimary;
+ }
+ }
+
+ &--compressed {
+ top: calc(50% - #{($euiRangeTrackCompressedHeight/2)});
+
+ .euiRangeHighlight__progress {
+ height: $euiRangeHighlightCompressedHeight;
+ }
+
+ &.euiRangeHighlight--hasTicks {
+ top: ($euiRangeThumbHeight - $euiRangeTrackCompressedHeight) / 2;
+ }
+ }
+
+ &:not(.euiRangeHighlight--compressed) {
+ &.euiRangeHighlight--hasTicks {
+ top: ($euiRangeThumbHeight - $euiRangeTrackHeight) / 2;
+ }
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_range_levels.scss b/src/themes/eui-amsterdam/overrides/_range_levels.scss
new file mode 100644
index 00000000000..941502fdc71
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_levels.scss
@@ -0,0 +1,32 @@
+.euiRangeLevels {
+ .euiRangeLevel {
+ margin-top: 0;
+ margin-bottom: 0;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ &--compressed {
+ .euiRangeLevel {
+ height: $euiRangeTrackCompressedHeight;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .euiRangeThumb--hasTicks {
+ top: 0;
+ }
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_range_slider.scss b/src/themes/eui-amsterdam/overrides/_range_slider.scss
new file mode 100644
index 00000000000..9081a370c15
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_slider.scss
@@ -0,0 +1,54 @@
+.euiRangeSlider {
+ // in firefox just setting the z-index to the thumb doesn't work
+ // so we need to set the z-index to all the range slider and make the track transparent
+ @include euiRangeTrackPerBrowser {
+ background-color: transparent;
+ }
+
+ // z-index higher than .euiRangeHighlight that is 1
+ // the track is transparent we just want the thumb to be on top of the .euiRangeHighlight
+ z-index: 2;
+
+ &--hasTicks {
+ height: $euiRangeThumbHeight;
+ }
+
+ &:focus {
+ @include euiRangeThumbPerBrowser {
+ @include euiRangeThumbFocus;
+ }
+
+ @include euiRangeTrackPerBrowser {
+ background-color: transparent;
+ }
+
+ outline: none;
+
+ ~ .euiRangeHighlight .euiRangeHighlight__progress {
+ background-color: $euiColorPrimary;
+ }
+ }
+
+ // in Chrome/FF/Edge we don't want to focus on click
+ &:focus:not(:focus-visible) {
+ @include euiRangeThumbPerBrowser {
+ @include euiRangeThumbBoxShadow;
+ background-color: $euiRangeThumbBackgroundColor;
+ }
+
+ ~ .euiRangeHighlight .euiRangeHighlight__progress {
+ background-color: $euiRangeHighlightColor;
+ }
+ }
+
+ &:disabled {
+ // sass-lint:disable-block mixins-before-declarations
+ @include euiRangeThumbPerBrowser {
+ background-color: $euiRangeThumbBackgroundColor;
+ }
+
+ ~ .euiRangeThumb {
+ background-color: $euiRangeThumbBackgroundColor;
+ }
+ }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_range_thumb.scss b/src/themes/eui-amsterdam/overrides/_range_thumb.scss
new file mode 100644
index 00000000000..b3798aa4118
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_thumb.scss
@@ -0,0 +1,22 @@
+.euiRangeThumb {
+ @include euiRangeThumbBoxShadow;
+ @include euiRangeThumbBorder;
+ background-color: $euiRangeThumbBackgroundColor;
+ z-index: 2; // higher than .euiRangeHighlight that is 1
+ pointer-events: none;
+
+ &--hasTicks {
+ top: 0;
+ margin-top: 0;
+ }
+
+ &:focus {
+ @include euiRangeThumbFocus;
+ outline: none;
+ }
+
+ &:focus:focus-visible {
+ outline: none;
+ }
+}
+
diff --git a/src/themes/eui-amsterdam/overrides/_range_ticks.scss b/src/themes/eui-amsterdam/overrides/_range_ticks.scss
new file mode 100644
index 00000000000..c25271aee8d
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_ticks.scss
@@ -0,0 +1,42 @@
+.euiRangeTicks:not(.euiRangeTicks--compressed) {
+ .euiRangeTick {
+ padding-top: 0;
+ }
+
+ .euiRangeTick:not(.euiRangeTick--hasTickMark)::before,
+ .euiRangeTick__pseudo {
+ width: $euiSizeXS;
+ height: $euiSizeM / 2;
+ background-color: $euiColorLightShade;
+ border-radius: $euiBorderRadiusSmall;
+ }
+}
+
+.euiRangeTicks--compressed {
+ .euiRangeTick {
+ padding-top: $euiSize - 2px;
+
+ &::before,
+ .euiRangeTick__pseudo {
+ background-color: $euiColorLightShade;
+ border-radius: $euiBorderRadiusSmall;
+ }
+ }
+}
+
+.euiRangeTick {
+ &::before {
+ background-color: $euiColorLightShade;
+ border-radius: $euiBorderRadiusSmall;
+ }
+
+ &:enabled:hover,
+ &:focus,
+ &--selected {
+ color: $euiColorPrimary;
+ }
+
+ &--selected {
+ font-weight: $euiFontWeightMedium;
+ }
+}
\ No newline at end of file
diff --git a/src/themes/eui-amsterdam/overrides/_range_tooltip.scss b/src/themes/eui-amsterdam/overrides/_range_tooltip.scss
new file mode 100644
index 00000000000..6e175212a61
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_tooltip.scss
@@ -0,0 +1,3 @@
+.euiRangeTooltip {
+ z-index: 3; // higher than thumbs that are 2
+}
diff --git a/src/themes/eui-amsterdam/overrides/_range_track.scss b/src/themes/eui-amsterdam/overrides/_range_track.scss
new file mode 100644
index 00000000000..b1b8e6727f8
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_range_track.scss
@@ -0,0 +1,110 @@
+.euiRangeTrack {
+ &::after {
+ content: '';
+ display: block;
+ background: $euiRangeTrackColor;
+ border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
+ border-radius: $euiRangeTrackRadius;
+ position: absolute;
+ left: 0;
+ }
+
+ &:not(.euiRangeTrack--compressed)::after {
+ @include euiRangeTrackSize;
+ }
+
+ &--compressed::after {
+ @include euiRangeTrackSize($compressed: true);
+ }
+
+ &--compressed {
+ &.euiRangeTrack--hasLevels {
+ .euiRangeTicks {
+ height: $euiRangeThumbHeight + ($euiRangeTrackCompressedHeight / 2);
+ top: $euiRangeThumbHeight;
+ }
+
+ .euiRangeTick {
+ padding-top: $euiRangeTrackCompressedHeight;
+ }
+ }
+
+ &:not(.euiRangeTrack--hasLevels) {
+ .euiRangeTicks {
+ height: $euiRangeTrackCompressedHeight + $euiRangeThumbHeight;
+ top: $euiRangeTrackHeight * 2;
+ }
+
+ .euiRangeTick {
+ padding-top: $euiSizeM / 2;
+ }
+ }
+
+ &.euiRangeTrack--hasTicks::after {
+ top: ($euiRangeThumbHeight - $euiRangeTrackCompressedHeight) / 2;
+ }
+
+ &:not(.euiRangeTrack--hasTicks)::after {
+ top: calc(50% - #{($euiRangeTrackCompressedHeight/2)});
+ }
+
+ .euiRangeThumb--hasTicks {
+ top: 0;
+ }
+
+ .euiRangeLevels:not(.euiRangeLevels--hasTicks) {
+ top: $euiRangeThumbHeight + $euiRangeTrackCompressedHeight - 1;
+ }
+
+ .euiRangeLevels--hasTicks {
+ top: $euiRangeThumbHeight - $euiRangeTrackCompressedHeight - 1;
+ }
+ }
+
+ &:not(.euiRangeTrack--compressed) {
+ &.euiRangeTrack--hasLevels {
+ .euiRangeTicks {
+ height: $euiRangeThumbHeight + ($euiRangeThumbHeight / 4);
+ top: $euiRangeThumbHeight + ($euiRangeThumbHeight / 4);
+ }
+
+ .euiRangeTick {
+ padding-top: $euiRangeTrackHeight;
+ }
+ }
+
+ &:not(.euiRangeTrack--hasLevels) {
+ .euiRangeTicks {
+ height: $euiRangeHeight - $euiRangeThumbHeight;
+ top: $euiRangeThumbHeight;
+ }
+
+ .euiRangeTick {
+ // removing 1px to prevent label getting cut in Safari
+ padding-top: ($euiRangeTrackHeight * 2) - 1;
+ }
+ }
+
+ &.euiRangeTrack--hasTicks {
+ .euiRangeTooltip {
+ top: -($euiSizeXS / 2);
+ }
+
+ &::after {
+ top: ($euiRangeThumbHeight - $euiRangeTrackHeight) / 2;
+ }
+ }
+
+ &:not(.euiRangeTrack--hasTicks)::after {
+ top: calc(50% - #{($euiRangeTrackHeight/2)});
+ }
+
+ .euiRangeLevels:not(.euiRangeLevels--hasTicks) {
+ top: $euiRangeThumbHeight + $euiRangeTrackHeight + ($euiSizeXS / 2);
+ }
+
+ .euiRangeLevels--hasTicks {
+ top: $euiRangeTrackHeight * 2;
+ }
+ }
+}
\ No newline at end of file