diff --git a/coverage/badge-branches.svg b/coverage/badge-branches.svg
index 0059dfa04..2b93c9215 100644
--- a/coverage/badge-branches.svg
+++ b/coverage/badge-branches.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/coverage/coverage-summary.json b/coverage/coverage-summary.json
index 640267cae..18a75318b 100644
--- a/coverage/coverage-summary.json
+++ b/coverage/coverage-summary.json
@@ -1,30 +1,30 @@
-{"total": {"lines":{"total":730,"covered":542,"skipped":0,"pct":74.25},"statements":{"total":744,"covered":548,"skipped":0,"pct":73.66},"functions":{"total":165,"covered":116,"skipped":0,"pct":70.3},"branches":{"total":788,"covered":492,"skipped":0,"pct":62.44}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/commonTypes.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Button/Button.tsx": {"lines":{"total":25,"covered":25,"skipped":0,"pct":100},"functions":{"total":8,"covered":6,"skipped":0,"pct":75},"statements":{"total":25,"covered":25,"skipped":0,"pct":100},"branches":{"total":53,"covered":45,"skipped":0,"pct":84.91}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Card/Card.tsx": {"lines":{"total":26,"covered":26,"skipped":0,"pct":100},"functions":{"total":6,"covered":5,"skipped":0,"pct":83.33},"statements":{"total":26,"covered":26,"skipped":0,"pct":100},"branches":{"total":30,"covered":28,"skipped":0,"pct":93.33}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Checkbox/Checkbox.tsx": {"lines":{"total":41,"covered":34,"skipped":0,"pct":82.93},"functions":{"total":7,"covered":4,"skipped":0,"pct":57.14},"statements":{"total":43,"covered":35,"skipped":0,"pct":81.4},"branches":{"total":41,"covered":32,"skipped":0,"pct":78.05}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Divider/Divider.tsx": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"branches":{"total":8,"covered":6,"skipped":0,"pct":75}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Dropdown/Dropdown.tsx": {"lines":{"total":122,"covered":107,"skipped":0,"pct":87.7},"functions":{"total":27,"covered":22,"skipped":0,"pct":81.48},"statements":{"total":122,"covered":107,"skipped":0,"pct":87.7},"branches":{"total":121,"covered":88,"skipped":0,"pct":72.73}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/InteractionFeedback/InteractionFeedback.tsx": {"lines":{"total":30,"covered":29,"skipped":0,"pct":96.67},"functions":{"total":13,"covered":10,"skipped":0,"pct":76.92},"statements":{"total":35,"covered":32,"skipped":0,"pct":91.43},"branches":{"total":15,"covered":13,"skipped":0,"pct":86.67}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Label/Label.tsx": {"lines":{"total":22,"covered":22,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":22,"covered":22,"skipped":0,"pct":100},"branches":{"total":26,"covered":22,"skipped":0,"pct":84.62}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Modal/Modal.tsx": {"lines":{"total":40,"covered":25,"skipped":0,"pct":62.5},"functions":{"total":8,"covered":5,"skipped":0,"pct":62.5},"statements":{"total":40,"covered":25,"skipped":0,"pct":62.5},"branches":{"total":29,"covered":20,"skipped":0,"pct":68.97}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Progress/Progress.tsx": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/RangeSlider/RangeSlider.tsx": {"lines":{"total":102,"covered":67,"skipped":0,"pct":65.69},"functions":{"total":26,"covered":19,"skipped":0,"pct":73.08},"statements":{"total":103,"covered":67,"skipped":0,"pct":65.05},"branches":{"total":108,"covered":58,"skipped":0,"pct":53.7}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/RangeSlider/types.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Table/Table.tsx": {"lines":{"total":136,"covered":68,"skipped":0,"pct":50},"functions":{"total":32,"covered":15,"skipped":0,"pct":46.88},"statements":{"total":139,"covered":68,"skipped":0,"pct":48.92},"branches":{"total":185,"covered":68,"skipped":0,"pct":36.76}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Table/types.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Tag/Tag.tsx": {"lines":{"total":17,"covered":17,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":17,"covered":17,"skipped":0,"pct":100},"branches":{"total":35,"covered":33,"skipped":0,"pct":94.29}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/Text/Text.tsx": {"lines":{"total":10,"covered":10,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":10,"covered":10,"skipped":0,"pct":100},"branches":{"total":27,"covered":27,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/components/TextInput/TextInput.tsx": {"lines":{"total":40,"covered":24,"skipped":0,"pct":60},"functions":{"total":10,"covered":4,"skipped":0,"pct":40},"statements":{"total":40,"covered":24,"skipped":0,"pct":60},"branches":{"total":53,"covered":28,"skipped":0,"pct":52.83}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/context/index.tsx": {"lines":{"total":16,"covered":12,"skipped":0,"pct":75},"functions":{"total":5,"covered":4,"skipped":0,"pct":80},"statements":{"total":16,"covered":12,"skipped":0,"pct":75},"branches":{"total":7,"covered":1,"skipped":0,"pct":14.29}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/enums/colors.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/enums/feedbackTypes.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/enums/fonts.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/enums/timings.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/enums/variants.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/htmlElements/index.tsx": {"lines":{"total":13,"covered":13,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":13,"covered":13,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/utils/color.ts": {"lines":{"total":10,"covered":9,"skipped":0,"pct":90},"functions":{"total":3,"covered":2,"skipped":0,"pct":66.67},"statements":{"total":10,"covered":9,"skipped":0,"pct":90},"branches":{"total":12,"covered":8,"skipped":0,"pct":66.67}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/utils/math.ts": {"lines":{"total":2,"covered":2,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":2,"covered":2,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/utils/refs.ts": {"lines":{"total":10,"covered":10,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":12,"covered":11,"skipped":0,"pct":91.67},"branches":{"total":8,"covered":6,"skipped":0,"pct":75}}
-,"/Users/dawsonbooth/Desktop/Headstorm/Projects/foundry-ui/src/utils/styles.ts": {"lines":{"total":57,"covered":31,"skipped":0,"pct":54.39},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":58,"covered":32,"skipped":0,"pct":55.17},"branches":{"total":30,"covered":9,"skipped":0,"pct":30}}
+{"total": {"lines":{"total":730,"covered":542,"skipped":0,"pct":74.25},"statements":{"total":744,"covered":548,"skipped":0,"pct":73.66},"functions":{"total":165,"covered":116,"skipped":0,"pct":70.3},"branches":{"total":791,"covered":495,"skipped":0,"pct":62.58}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/commonTypes.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Button/Button.tsx": {"lines":{"total":25,"covered":25,"skipped":0,"pct":100},"functions":{"total":8,"covered":6,"skipped":0,"pct":75},"statements":{"total":25,"covered":25,"skipped":0,"pct":100},"branches":{"total":53,"covered":45,"skipped":0,"pct":84.91}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Card/Card.tsx": {"lines":{"total":26,"covered":26,"skipped":0,"pct":100},"functions":{"total":6,"covered":5,"skipped":0,"pct":83.33},"statements":{"total":26,"covered":26,"skipped":0,"pct":100},"branches":{"total":30,"covered":28,"skipped":0,"pct":93.33}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Checkbox/Checkbox.tsx": {"lines":{"total":41,"covered":34,"skipped":0,"pct":82.93},"functions":{"total":7,"covered":4,"skipped":0,"pct":57.14},"statements":{"total":43,"covered":35,"skipped":0,"pct":81.4},"branches":{"total":41,"covered":32,"skipped":0,"pct":78.05}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Divider/Divider.tsx": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"branches":{"total":8,"covered":6,"skipped":0,"pct":75}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Dropdown/Dropdown.tsx": {"lines":{"total":122,"covered":107,"skipped":0,"pct":87.7},"functions":{"total":27,"covered":22,"skipped":0,"pct":81.48},"statements":{"total":122,"covered":107,"skipped":0,"pct":87.7},"branches":{"total":121,"covered":88,"skipped":0,"pct":72.73}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/InteractionFeedback/InteractionFeedback.tsx": {"lines":{"total":30,"covered":29,"skipped":0,"pct":96.67},"functions":{"total":13,"covered":10,"skipped":0,"pct":76.92},"statements":{"total":35,"covered":32,"skipped":0,"pct":91.43},"branches":{"total":15,"covered":13,"skipped":0,"pct":86.67}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Label/Label.tsx": {"lines":{"total":22,"covered":22,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":22,"covered":22,"skipped":0,"pct":100},"branches":{"total":26,"covered":22,"skipped":0,"pct":84.62}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Modal/Modal.tsx": {"lines":{"total":40,"covered":25,"skipped":0,"pct":62.5},"functions":{"total":8,"covered":5,"skipped":0,"pct":62.5},"statements":{"total":40,"covered":25,"skipped":0,"pct":62.5},"branches":{"total":29,"covered":20,"skipped":0,"pct":68.97}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Progress/Progress.tsx": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/RangeSlider/RangeSlider.tsx": {"lines":{"total":102,"covered":67,"skipped":0,"pct":65.69},"functions":{"total":26,"covered":19,"skipped":0,"pct":73.08},"statements":{"total":103,"covered":67,"skipped":0,"pct":65.05},"branches":{"total":111,"covered":61,"skipped":0,"pct":54.95}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/RangeSlider/types.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Table/Table.tsx": {"lines":{"total":136,"covered":68,"skipped":0,"pct":50},"functions":{"total":32,"covered":15,"skipped":0,"pct":46.88},"statements":{"total":139,"covered":68,"skipped":0,"pct":48.92},"branches":{"total":185,"covered":68,"skipped":0,"pct":36.76}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Table/types.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Tag/Tag.tsx": {"lines":{"total":17,"covered":17,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":17,"covered":17,"skipped":0,"pct":100},"branches":{"total":35,"covered":33,"skipped":0,"pct":94.29}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/Text/Text.tsx": {"lines":{"total":10,"covered":10,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":10,"covered":10,"skipped":0,"pct":100},"branches":{"total":27,"covered":27,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/components/TextInput/TextInput.tsx": {"lines":{"total":40,"covered":24,"skipped":0,"pct":60},"functions":{"total":10,"covered":4,"skipped":0,"pct":40},"statements":{"total":40,"covered":24,"skipped":0,"pct":60},"branches":{"total":53,"covered":28,"skipped":0,"pct":52.83}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/context/index.tsx": {"lines":{"total":16,"covered":12,"skipped":0,"pct":75},"functions":{"total":5,"covered":4,"skipped":0,"pct":80},"statements":{"total":16,"covered":12,"skipped":0,"pct":75},"branches":{"total":7,"covered":1,"skipped":0,"pct":14.29}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/enums/colors.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/enums/feedbackTypes.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/enums/fonts.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/enums/timings.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/enums/variants.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/htmlElements/index.tsx": {"lines":{"total":13,"covered":13,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":13,"covered":13,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/utils/color.ts": {"lines":{"total":10,"covered":9,"skipped":0,"pct":90},"functions":{"total":3,"covered":2,"skipped":0,"pct":66.67},"statements":{"total":10,"covered":9,"skipped":0,"pct":90},"branches":{"total":12,"covered":8,"skipped":0,"pct":66.67}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/utils/math.ts": {"lines":{"total":2,"covered":2,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":2,"covered":2,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/utils/refs.ts": {"lines":{"total":10,"covered":10,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":12,"covered":11,"skipped":0,"pct":91.67},"branches":{"total":8,"covered":6,"skipped":0,"pct":75}}
+,"/Users/jackstorey/Documents/GitHub/foundry-ui/src/utils/styles.ts": {"lines":{"total":57,"covered":31,"skipped":0,"pct":54.39},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":58,"covered":32,"skipped":0,"pct":55.17},"branches":{"total":30,"covered":9,"skipped":0,"pct":30}}
}
diff --git a/src/components/RangeSlider/RangeSlider.stories.tsx b/src/components/RangeSlider/RangeSlider.stories.tsx
index 18c3383a5..da990c867 100644
--- a/src/components/RangeSlider/RangeSlider.stories.tsx
+++ b/src/components/RangeSlider/RangeSlider.stories.tsx
@@ -77,6 +77,7 @@ export const Default: Story = args => {
`
+ ${({ showDomainLabels ,hasHandleLabels, disabled, beingDragged = false }: ContainerProps) => `
position: relative;
height: 1rem;
width: 100%;
@@ -94,7 +94,7 @@ export const DragHandle = styled(a.div)`
`;
export const HandleLabel = styled.div`
- ${({ velocity = 0 }: HandleLabelProps) => {
+ ${({ velocity = 0, }: HandleLabelProps) => {
const { colors } = useTheme();
return `
position: absolute;
@@ -220,6 +220,7 @@ export const RangeSlider = ({
showDomainLabels = true,
showSelectedRange = true,
+ showHandleLabels = true,
motionBlur = false,
springOnRelease = true,
@@ -406,6 +407,7 @@ export const RangeSlider = ({
data-test-id={['hs-ui-range-slider', testId].join('-')}
disabled={disabled}
hasHandleLabels={hasHandleLabels}
+ showHandleLabels = {showHandleLabels}
showDomainLabels={showDomainLabels}
ref={containerRef}
{...containerProps}
@@ -461,9 +463,11 @@ export const RangeSlider = ({
ref={dragHandleRef}
{...dragHandleProps}
>
-
- {label}
-
+ {showHandleLabels && (
+
+ {label}
+
+ )}
);
})}
diff --git a/src/components/RangeSlider/types.ts b/src/components/RangeSlider/types.ts
index c64834c4e..55c3d904c 100644
--- a/src/components/RangeSlider/types.ts
+++ b/src/components/RangeSlider/types.ts
@@ -1,6 +1,8 @@
import React from 'react';
+import { StyledComponentBase } from 'styled-components';
import { SubcomponentPropsType } from '../commonTypes';
+
export type ValueProp = {
value: number;
label?: string | number | Node;
@@ -9,6 +11,7 @@ export type ValueProp = {
export type ContainerProps = {
showDomainLabels?: boolean;
+ showHandleLabels?: boolean;
hasHandleLabels?: boolean;
disabled: boolean;
beingDragged: boolean;
@@ -19,21 +22,21 @@ export type HandleProps = {
color: string;
};
-export type HandleLabelProps = { velocity?: number };
+export type HandleLabelProps = { velocity?: number , showHandleLabels ?: boolean};
export type SelectedRangeProps = { min: number; max: number; selectedRange: number[] };
export type DomainLabelProps = { position: 'left' | 'right' };
export type RangeSliderProps = {
- StyledContainer?: any;
- StyledDragHandle?: any;
- StyledHandleLabel?: any;
- StyledSlideRail?: any;
- StyledSelectedRangeRail?: any;
- StyledDomainLabel?: any;
- StyledMarker?: any;
- StyledMarkerLabel?: any;
+ StyledContainer?: string & StyledComponentBase;
+ StyledDragHandle?: string & StyledComponentBase;
+ StyledHandleLabel?: string & StyledComponentBase;
+ StyledSlideRail?: string & StyledComponentBase;
+ StyledSelectedRangeRail?: string & StyledComponentBase;
+ StyledDomainLabel?: string & StyledComponentBase;
+ StyledMarker?: string & StyledComponentBase;
+ StyledMarkerLabel?: string & StyledComponentBase;
containerProps?: SubcomponentPropsType;
dragHandleProps?: SubcomponentPropsType;
handleLabelProps?: SubcomponentPropsType;
@@ -54,6 +57,7 @@ export type RangeSliderProps = {
showDomainLabels?: boolean;
showSelectedRange?: boolean;
+ showHandleLabels?: boolean;
motionBlur?: boolean;
springOnRelease?: boolean;