From cfd927cf1b7c9315f5ab244368a909f4893464d2 Mon Sep 17 00:00:00 2001
From: adamviktora <84135613+adamviktora@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:17:09 +0200
Subject: [PATCH] refactor(SliderStep): use token instead for hardcoded value
 (#9651)

---
 packages/react-core/src/components/Slider/SliderStep.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Slider/SliderStep.tsx b/packages/react-core/src/components/Slider/SliderStep.tsx
index 36c184fe8be..81ff4afa54b 100644
--- a/packages/react-core/src/components/Slider/SliderStep.tsx
+++ b/packages/react-core/src/components/Slider/SliderStep.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
+import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -26,7 +27,7 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties;
+  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}