From fa1b898d80615bae446ed463cc72a2ee4d81c9fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 18 Feb 2025 13:11:02 +0100
Subject: [PATCH 01/11] Slider redesign with new tokens architecture

---
 packages/lib/.storybook/preview-head.html  |   1 -
 packages/lib/.storybook/preview.tsx        |   1 +
 packages/lib/src/index.ts                  |   2 +-
 packages/lib/src/slider/Slider.stories.tsx |  63 +---
 packages/lib/src/slider/Slider.tsx         | 415 ++++++++-------------
 packages/lib/src/slider/types.ts           |  60 +--
 6 files changed, 200 insertions(+), 342 deletions(-)

diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html
index e28cb145ff..4e1ea405ff 100644
--- a/packages/lib/.storybook/preview-head.html
+++ b/packages/lib/.storybook/preview-head.html
@@ -2,7 +2,6 @@
   rel="stylesheet"
   href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1"
 />
-<link rel="stylesheet" href="../src/styles/variables.css" />
 
 <style>
   body {
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index 50171526b6..e535a40648 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
+import "../src/styles/variables.css";
 
 const preview: Preview = {
   parameters: {
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index fd0fc86ca5..3ded437d20 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -1,5 +1,5 @@
 import "./styles/fonts.css";
-// import "./styles/variables.css";
+import "./styles/variables.css";
 
 export { default as DxcAccordion } from "./accordion/Accordion";
 export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup";
diff --git a/packages/lib/src/slider/Slider.stories.tsx b/packages/lib/src/slider/Slider.stories.tsx
index a3deb0d622..b15fb1de34 100644
--- a/packages/lib/src/slider/Slider.stories.tsx
+++ b/packages/lib/src/slider/Slider.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
-import { HalstackProvider } from "../HalstackContext";
 import DxcSlider from "./Slider";
 
 export default {
@@ -11,17 +10,13 @@ export default {
 
 const labelFormat = (value: number) => `${value}E100000000000000000000000`;
 
-const opinionatedTheme = {
-  slider: {
-    baseColor: "#0067b3",
-    fontColor: "#000000",
-    totalLineColor: "#e6e6e6",
-  },
-};
-
 const Slider = () => (
   <>
-    <Title title="States" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" marks step={10} showLimitsValues />
+    </ExampleContainer>
+    <Title title="Thumb states" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
       <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
@@ -128,54 +123,6 @@ const Slider = () => (
         size="large"
       />
     </ExampleContainer>
-    <Title title="Opinionated theme" theme="light" level={2} />
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Active" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled discrete slider with input" theme="light" level={4} />{" "}
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider
-          label="Slider"
-          helperText="Help message"
-          disabled
-          defaultValue={40}
-          minValue={0}
-          maxValue={50}
-          showLimitsValues
-          showInput
-          marks
-          step={10}
-        />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Continuous slider" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
-      </HalstackProvider>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Discrete slider" theme="light" level={4} />
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
-      </HalstackProvider>
-    </ExampleContainer>
   </>
 );
 
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 741a49a23d..e9ac38e907 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -1,10 +1,9 @@
-import { ChangeEvent, forwardRef, MouseEvent, useContext, useId, useMemo, useState } from "react";
-import styled, { ThemeProvider } from "styled-components";
+import { ChangeEvent, forwardRef, MouseEvent, useId, useMemo, useState } from "react";
+import styled, { css } from "styled-components";
 import DxcTextInput from "../text-input/TextInput";
 import { spaces } from "../common/variables";
-import { getMargin } from "../common/utils";
-import HalstackContext from "../HalstackContext";
 import SliderPropsType, { RefType } from "./types";
+import { getMargin } from "../common/utils";
 
 const sizes = {
   medium: "360px",
@@ -17,15 +16,7 @@ const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPropsType
     ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
     : size && sizes[size];
 
-const getChromeStyles = () => `
-  width: 100%;
-  margin-right: 4px;`;
-
-const getFirefoxStyles = () => `
-  width: calc(100% - 16px);
-  margin-right: 3px;`;
-
-const Container = styled.div<{
+const SliderContainer = styled.div<{
   margin: SliderPropsType["margin"];
   size: SliderPropsType["size"];
 }>`
@@ -44,41 +35,90 @@ const Container = styled.div<{
 `;
 
 const Label = styled.label<{ disabled: SliderPropsType["disabled"] }>`
-  color: ${(props) => (props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor)};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-size: ${(props) => props.theme.labelFontSize};
-  font-style: ${(props) => props.theme.labelFontStyle};
-  font-weight: ${(props) => props.theme.labelFontWeight};
-  line-height: ${(props) => props.theme.labelLineHeight};
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")};
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-label-m);
+  font-weight: var(--typography-label-semibold);
 `;
 
 const HelperText = styled.span<{ disabled: SliderPropsType["disabled"] }>`
-  color: ${(props) => (props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor)};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-size: ${(props) => props.theme.helperTextFontSize};
-  font-style: ${(props) => props.theme.helperTextFontStyle};
-  font-weight: ${(props) => props.theme.helperTextFontWeight};
-  line-height: ${(props) => props.theme.helperTextLineHeight};
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)")};
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-helper-text-s);
+  font-weight: var(--typography-helper-text-regular);
+`;
+
+const MainContainer = styled.div<{ showInput: SliderPropsType["showInput"] }>`
+  display: grid;
+  gap: var(--spacing-gap-l);
+  ${({ showInput }) => showInput && "grid-template-columns: 1fr 64px;"};
+  height: var(--height-xxl);
+  place-items: center;
 `;
 
+const LimitsValueGrid = styled.div<{ showLimitsValues: SliderPropsType["showLimitsValues"] }>`
+  display: grid;
+  align-items: center;
+  gap: var(--spacing-gap-ml);
+  ${({ showLimitsValues }) => showLimitsValues && "grid-template-columns: auto 1fr auto;"}
+  width: 100%;
+`;
+
+const LimitLabel = styled.span<{
+  disabled: SliderPropsType["disabled"];
+}>`
+  color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")};
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-label-l);
+  font-weight: var(--typography-label-regular);
+`;
+
+const SliderInputContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--height-xxxs);
+`;
+
+const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
+  -webkit-appearance: none;
+  width: 12px;
+  height: var(--height-xxxs);
+  background: ${disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
+  border-radius: 50%;
+  transition:
+    width 0.2s ease,
+    height 0.2s ease;
+  &:active {
+    ${!disabled && `background-color: var(--color-fg-secondary-stronger);`}
+  }
+  &:hover {
+    ${!disabled &&
+    `height: var(--height-xxs);
+     width: 16px;
+     background-color: var(--color-fg-secondary-strong);`}
+  }
+`;
+const thumbFocusStyles = css`
+  outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+  outline-offset: 2px;
+`;
 const SliderInput = styled.input<{
   disabled: SliderPropsType["disabled"];
-  value: SliderPropsType["value"];
   min: SliderPropsType["minValue"];
   max: SliderPropsType["maxValue"];
+  value: SliderPropsType["value"];
 }>`
-  width: 100%;
-  min-width: 240px;
-  height: ${(props) => props.theme.trackLineThickness};
-  display: inline-block;
-  vertical-align: middle;
   -webkit-appearance: none;
-  background-color: ${(props) =>
-    props.disabled ? `${props.theme.disabledTotalLineColor}61` : props.theme.totalLineColor};
-  background-image: ${(props) =>
-    props.disabled
-      ? `linear-gradient(${props.theme.disabledTrackLineColor}, ${props.theme.disabledTrackLineColor})`
-      : `linear-gradient(${props.theme.trackLineColor}, ${props.theme.trackLineColor})`};
+  margin: 0;
+  width: 100%;
+  height: 2px;
+  background-color: ${({ disabled }) =>
+    disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-lighter)"};
+  background-image: ${({ disabled }) =>
+    disabled
+      ? "linear-gradient(var(--color-fg-neutral-medium), var(--color-fg-neutral-medium))"
+      : "linear-gradient(var(--color-fg-secondary-medium), var(--color-fg-secondary-medium))"};
   background-repeat: no-repeat;
   background-size: ${(props) =>
     props.value != null &&
@@ -86,222 +126,88 @@ const SliderInput = styled.input<{
     props.max != null &&
     `${((props.value - props.min) * 100) / (props.max - props.min)}% 100%`};
   border-radius: 5px;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-  &::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-    box-shadow: none;
-    border: none;
-    background: transparent;
-    margin: 0px -8px;
-  }
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 
   &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: ${(props) => props.theme.thumbHeight};
-    width: ${(props) => props.theme.thumbWidth};
-    border-radius: 25px;
-    background: ${(props) =>
-      props.disabled ? props.theme.disabledThumbBackgroundColor : props.theme.thumbBackgroundColor};
-    &:active {
-      ${(props) =>
-        !props.disabled &&
-        `
-          background: ${props.theme.activeThumbBackgroundColor};
-            transform: scale(1.16667);`}
-    }
-    &:hover {
-      ${(props) =>
-        !props.disabled &&
-        `height: ${props.theme.hoverThumbHeight};
-          width: ${props.theme.hoverThumbWidth};
-          transform: scale(1.16667);
-          transform-origin: center center;
-          background: ${props.theme.hoverThumbBackgroundColor};`}
-    }
-  }
-  &::-moz-range-track {
-    -webkit-appearance: none;
-    box-shadow: none;
-    border: none;
-    background: transparent;
+    ${({ disabled }) => thumbStyles(disabled)}
   }
   &::-moz-range-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: ${(props) => props.theme.thumbHeight};
-    width: ${(props) => props.theme.thumbWidth};
-    border-radius: 25px;
-    background: ${(props) =>
-      props.disabled ? props.theme.disabledThumbBackgroundColor : props.theme.thumbBackgroundColor};
-    &:active {
-      background: ${(props) => props.theme.activeThumbBackgroundColor};
-      transform: scale(1.16667);
-    }
-    &:hover {
-      ${(props) =>
-        !props.disabled &&
-        `height: ${props.theme.hoverThumbHeight};
-          width: ${props.theme.hoverThumbWidth};
-          transform: scale(1.16667);
-          transform-origin: center center;
-          background: ${props.theme.hoverThumbBackgroundColor};`}
-    }
+    ${({ disabled }) => thumbStyles(disabled)}
   }
   &:focus {
     outline: none;
-    &::-webkit-slider-thumb {
-      outline: ${(props) => (props.disabled ? props.theme.disabledFocusColor : props.theme.focusColor)} auto 1px;
-      outline-offset: 2px;
+    ::-webkit-slider-thumb {
+      ${thumbFocusStyles}
     }
-    &::-moz-range-thumb {
-      outline: ${(props) => (props.disabled ? props.theme.disabledFocusColor : props.theme.focusColor)} auto 1px;
-      outline-offset: 2px;
+    ::-moz-range-thumb {
+      ${thumbFocusStyles}
     }
   }
 `;
 
-const SliderContainer = styled.div`
+const TicksContainer = styled.div`
+  position: absolute;
   display: flex;
-  height: 48px;
   align-items: center;
-`;
-
-const LimitLabelContainer = styled.span<{
-  disabled: SliderPropsType["disabled"];
-}>`
-  color: ${(props) => (props.disabled ? props.theme.disabledLimitValuesFontColor : props.theme.limitValuesFontColor)};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-size: ${(props) => props.theme.limitValuesFontSize};
-  font-style: ${(props) => props.theme.limitValuesFontStyle};
-  font-weight: ${(props) => props.theme.limitValuesFontWeight};
-  letter-spacing: ${(props) => props.theme.limitValuesFontLetterSpacing};
-  white-space: nowrap;
-`;
-
-const MinLabelContainer = styled(LimitLabelContainer)`
-  margin-right: ${(props) => props.theme.floorLabelMarginRight};
-`;
-
-const MaxLabelContainer = styled(LimitLabelContainer)<{ step: number }>`
-  margin-left: ${(props) => (props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem")};
-`;
-
-const SliderInputContainer = styled.div`
-  position: relative;
+  justify-content: space-between;
   width: 100%;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: -2px;
-  padding-top: 1px;
-  z-index: 0;
-`;
-
-const MarksContainer = styled.div<{ isFirefox: boolean }>`
-  ${(props) => (props.isFirefox ? getFirefoxStyles() : getChromeStyles())}
-  position: absolute;
   pointer-events: none;
-  height: 100%;
-  display: flex;
-  align-items: center;
 `;
 
-const TickMark = styled.span<{
-  stepPosition: number;
+const Tick = styled.span<{
   disabled: SliderPropsType["disabled"];
+  stepPosition: number;
   stepValue: SliderPropsType["value"];
 }>`
-  position: absolute;
-  background: ${(props) =>
-    props.disabled ? props.theme.disabledTickBackgroundColor : props.theme.tickBackgroundColor};
-  height: ${(props) => props.theme.tickHeight};
-  width: ${(props) => props.theme.tickWidth};
-  border-radius: 18px;
-  left: ${(props) => `calc(${props.stepPosition} * 100%)`};
-  z-index: ${(props) => props.stepValue != null && `${props.stepPosition <= props.stepValue ? "-1" : "0"}`};
-`;
-
-const TextInputContainer = styled.div`
-  margin-left: ${(props) => props.theme.inputMarginLeft};
-  max-width: 70px;
+  background-color: ${({ disabled }) =>
+    disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
+  border-radius: 50%;
+  height: 6px;
+  width: 6px;
+  z-index: ${(props) => props.stepValue != null && (props.stepPosition <= props.stepValue ? "-1" : "0")};
 `;
 
 const DxcSlider = forwardRef<RefType, SliderPropsType>(
   (
     {
-      label = "",
-      name = "",
+      ariaLabel = "Slider",
       defaultValue,
-      value,
-      helperText = "",
-      minValue = 0,
+      disabled,
+      helperText,
+      label,
+      labelFormatCallback,
+      margin,
+      marks,
       maxValue = 100,
-      step = 1,
-      showLimitsValues = false,
-      showInput = false,
-      disabled = false,
-      marks = false,
+      minValue = 0,
+      name,
       onChange,
       onDragEnd,
-      labelFormatCallback,
-      margin,
+      showLimitsValues,
+      showInput,
       size = "fillParent",
-      ariaLabel = "Slider",
+      step = 1,
+      value,
     },
     ref
   ): JSX.Element => {
     const labelId = `label-${useId()}`;
-    const [innerValue, setInnerValue] = useState(defaultValue ?? 0);
     const [dragging, setDragging] = useState(false);
-    const colorsTheme = useContext(HalstackContext);
-    const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
-
-    const minLabel = useMemo(
-      () => (labelFormatCallback ? labelFormatCallback(minValue) : minValue),
-      [labelFormatCallback, minValue]
-    );
-
-    const maxLabel = useMemo(
-      () => (labelFormatCallback ? labelFormatCallback(maxValue) : maxValue),
-      [labelFormatCallback, maxValue]
-    );
-
-    const tickMarks = useMemo(() => {
-      const numberOfMarks = Math.floor(maxValue / step - minValue / step);
-      const range = maxValue - minValue;
-      const ticks = [];
-
-      if (marks) {
-        for (let index = 0; index <= numberOfMarks; index++) {
-          ticks.push(
-            <TickMark
-              disabled={disabled}
-              stepPosition={(step * index) / range}
-              stepValue={(value ?? innerValue) / maxValue}
-              key={`tickmark-${index}`}
-            />
-          );
-        }
-        return ticks;
-      }
-      return null;
-    }, [minValue, maxValue, step, value, innerValue]);
+    const [innerValue, setInnerValue] = useState(defaultValue ?? 0);
+    const minLabel = useMemo(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
+    const maxLabel = useMemo(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
 
-    const handleSliderChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
       const intValue = parseInt(event.target.value, 10);
-      if (intValue !== value || intValue !== innerValue) {
-        setInnerValue(intValue);
-      }
+      if (intValue !== value || intValue !== innerValue) setInnerValue(intValue);
       onChange?.(intValue);
     };
 
-    const handleSliderDragging = () => {
+    const handleOnMouseDown = () => {
       setDragging(true);
     };
 
-    const handleSliderOnChangeCommitted = (event: MouseEvent<HTMLInputElement>) => {
+    const handleOnMouseUp = (event: MouseEvent<HTMLInputElement>) => {
       const intValue = parseInt((event.target as HTMLInputElement).value, 10);
       if (dragging) {
         setDragging(false);
@@ -309,8 +215,8 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       }
     };
 
-    const handlerInputChange = (event: { value: string; error?: string }) => {
-      const intValue = parseInt(event.value, 10);
+    const handlerTextInputOnChange = ({ value }: { value: string; error?: string }) => {
+      const intValue = parseInt(value, 10);
       if (!Number.isNaN(intValue)) {
         if (value == null) setInnerValue(intValue > maxValue ? maxValue : intValue);
         onChange?.(intValue > maxValue ? maxValue : intValue);
@@ -318,56 +224,61 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     };
 
     return (
-      <ThemeProvider theme={colorsTheme.slider}>
-        <Container margin={margin} size={size} ref={ref}>
-          {label && (
-            <Label id={labelId} disabled={disabled}>
-              {label}
-            </Label>
-          )}
-          <HelperText disabled={disabled}>{helperText}</HelperText>
-          <SliderContainer>
-            {showLimitsValues && <MinLabelContainer disabled={disabled}>{minLabel}</MinLabelContainer>}
+      <SliderContainer margin={margin} size={size} ref={ref}>
+        {label && (
+          <Label id={labelId} disabled={disabled}>
+            {label}
+          </Label>
+        )}
+        {helperText && <HelperText disabled={disabled}>{helperText}</HelperText>}
+        <MainContainer showInput={showInput}>
+          <LimitsValueGrid showLimitsValues={showLimitsValues}>
+            {showLimitsValues && <LimitLabel disabled={disabled}>{minLabel}</LimitLabel>}
             <SliderInputContainer>
               <SliderInput
-                role="slider"
-                type="range"
-                value={value != null && value >= 0 ? value : innerValue}
-                min={minValue}
-                max={maxValue}
-                step={step}
-                disabled={disabled}
+                aria-label={label ? undefined : ariaLabel}
                 aria-labelledby={label ? labelId : undefined}
                 aria-orientation="horizontal"
                 aria-valuemax={maxValue}
                 aria-valuemin={minValue}
                 aria-valuenow={value != null && value >= 0 ? value : innerValue}
-                aria-label={label ? undefined : ariaLabel}
-                onChange={handleSliderChange}
-                onMouseUp={handleSliderOnChangeCommitted}
-                onMouseDown={handleSliderDragging}
+                disabled={disabled}
+                max={maxValue}
+                min={minValue}
+                onChange={handleOnChange}
+                onMouseUp={handleOnMouseUp}
+                onMouseDown={handleOnMouseDown}
+                role="slider"
+                step={step}
+                type="range"
+                value={value != null && value >= 0 ? value : innerValue}
               />
-              {marks && <MarksContainer isFirefox={isFirefox}>{tickMarks}</MarksContainer>}
+              {marks && (
+                <TicksContainer>
+                  {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => (
+                    <Tick
+                      disabled={disabled}
+                      key={`tickmark-${index}`}
+                      stepPosition={(step * index) / (maxValue - minValue)}
+                      stepValue={(value ?? innerValue) / maxValue}
+                    />
+                  ))}
+                </TicksContainer>
+              )}
             </SliderInputContainer>
-            {showLimitsValues && (
-              <MaxLabelContainer disabled={disabled} step={step}>
-                {maxLabel}
-              </MaxLabelContainer>
-            )}
-            {showInput && (
-              <TextInputContainer>
-                <DxcTextInput
-                  name={name}
-                  value={value != null && value >= 0 ? value.toString() : innerValue.toString()}
-                  disabled={disabled}
-                  onChange={handlerInputChange}
-                  size="fillParent"
-                />
-              </TextInputContainer>
-            )}
-          </SliderContainer>
-        </Container>
-      </ThemeProvider>
+            {showLimitsValues && <LimitLabel disabled={disabled}>{maxLabel}</LimitLabel>}
+          </LimitsValueGrid>
+          {showInput && (
+            <DxcTextInput
+              disabled={disabled}
+              name={name}
+              onChange={handlerTextInputOnChange}
+              size="fillParent"
+              value={value != null && value >= 0 ? value.toString() : innerValue.toString()}
+            />
+          )}
+        </MainContainer>
+      </SliderContainer>
     );
   }
 );
diff --git a/packages/lib/src/slider/types.ts b/packages/lib/src/slider/types.ts
index 56b65570ce..2361ed43f3 100644
--- a/packages/lib/src/slider/types.ts
+++ b/packages/lib/src/slider/types.ts
@@ -2,53 +2,51 @@ import { Margin, Space } from "../common/utils";
 
 type Props = {
   /**
-   * Text to be placed above the slider.
-   */
-  label?: string;
-  /**
-   * Name attribute of the input element.
+   * Specifies a string to be used as the name for the slider element when no `label` is provided.
    */
-  name?: string;
+  ariaLabel?: string;
   /**
    * Initial value of the slider, only when it is uncontrolled.
    */
   defaultValue?: number;
   /**
-   * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+   * If true, the component will be disabled.
    */
-  value?: number;
+  disabled?: boolean;
   /**
    * Helper text to be placed above the slider.
    */
   helperText?: string;
   /**
-   * The minimum value available for selection.
+   * Text to be placed above the slider.
    */
-  minValue?: number;
+  label?: string;
   /**
-   * The maximum value available for selection.
+   * This function will be used to format the labels displayed next to the slider.
+   * The value will be passed as parameter and the function must return the formatted value.
    */
-  maxValue?: number;
+  labelFormatCallback?: (value: number) => string;
   /**
-   * The step interval between values available for selection.
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
    */
-  step?: number;
+  margin?: Space | Margin;
   /**
-   * Whether the min/max value labels should be displayed next to the slider
+   * Whether the marks between each step should be shown or not.
    */
-  showLimitsValues?: boolean;
+  marks?: boolean;
   /**
-   * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
+   * The maximum value available for selection.
    */
-  showInput?: boolean;
+  maxValue?: number;
   /**
-   * If true, the component will be disabled.
+   * The minimum value available for selection.
    */
-  disabled?: boolean;
+  minValue?: number;
   /**
-   * Whether the marks between each step should be shown or not.
+   * Name attribute of the input element.
    */
-  marks?: boolean;
+  name?: string;
   /**
    * This function will be called when the slider changes its value, as it's being dragged.
    * The new value will be passed as a parameter when this function is executed.
@@ -60,23 +58,25 @@ type Props = {
    */
   onDragEnd?: (value: number) => void;
   /**
-   * This function will be used to format the labels displayed next to the slider.
-   * The value will be passed as parameter and the function must return the formatted value.
+   * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
    */
-  labelFormatCallback?: (value: number) => string;
+  showInput?: boolean;
   /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   * Whether the min/max value labels should be displayed next to the slider
    */
-  margin?: Space | Margin;
+  showLimitsValues?: boolean;
   /**
    * Size of the component.
    */
   size?: "medium" | "large" | "fillParent";
   /**
-   * Specifies a string to be used as the name for the slider element when no `label` is provided.
+   * The step interval between values available for selection.
    */
-  ariaLabel?: string;
+  step?: number;
+  /**
+   * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+   */
+  value?: number;
 };
 
 /**

From cae98c6c12be5dd7fe2bdcc90fd9b4e2afb87d60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 19 Feb 2025 12:07:55 +0100
Subject: [PATCH 02/11] Updated test and behaviour from Slider

---
 .../components/slider/code/SliderCodePage.tsx |  4 +-
 packages/lib/src/slider/Slider.stories.tsx    |  4 -
 packages/lib/src/slider/Slider.test.tsx       | 90 +++++++------------
 packages/lib/src/slider/Slider.tsx            | 43 +++++----
 4 files changed, 55 insertions(+), 86 deletions(-)

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index c063cb414a..518213666d 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -29,7 +29,9 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>Initial value of the slider, only when it is uncontrolled.</td>
-            <td>-</td>
+            <td>
+              <TableCode>0</TableCode>
+            </td>
           </tr>
           <tr>
             <td>value</td>
diff --git a/packages/lib/src/slider/Slider.stories.tsx b/packages/lib/src/slider/Slider.stories.tsx
index b15fb1de34..bd19bd62c5 100644
--- a/packages/lib/src/slider/Slider.stories.tsx
+++ b/packages/lib/src/slider/Slider.stories.tsx
@@ -12,10 +12,6 @@ const labelFormat = (value: number) => `${value}E100000000000000000000000`;
 
 const Slider = () => (
   <>
-    <ExampleContainer>
-      <Title title="Default" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" marks step={10} showLimitsValues />
-    </ExampleContainer>
     <Title title="Thumb states" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
diff --git a/packages/lib/src/slider/Slider.test.tsx b/packages/lib/src/slider/Slider.test.tsx
index 41bf7ca366..cbe5ba5016 100644
--- a/packages/lib/src/slider/Slider.test.tsx
+++ b/packages/lib/src/slider/Slider.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import DxcSlider from "./Slider";
 
@@ -15,7 +15,7 @@ import DxcSlider from "./Slider";
 
 describe("Slider component tests", () => {
   test("Slider renders with correct text and label id", () => {
-    const { getByText, getByRole } = render(<DxcSlider label="label" minValue={0} maxValue={100} showLimitsValues />);
+    const { getByText, getByRole } = render(<DxcSlider label="label" showLimitsValues />);
     expect(getByText("0")).toBeTruthy();
     expect(getByText("100")).toBeTruthy();
     const sliderId = getByText("label").getAttribute("id");
@@ -23,49 +23,49 @@ describe("Slider component tests", () => {
     expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
     expect(getByRole("slider").getAttribute("aria-label")).toBeNull();
   });
-
   test("Renders with correct error aria label", () => {
-    const { getByRole } = render(
-      <DxcSlider ariaLabel="Example aria label" minValue={0} maxValue={100} showLimitsValues />
-    );
+    const { getByRole } = render(<DxcSlider ariaLabel="Example aria label" showLimitsValues />);
     const slider = getByRole("slider");
     expect(slider.getAttribute("aria-label")).toBe("Example aria label");
   });
-
   test("Slider renders with correct initial value when it is uncontrolled", () => {
-    const { getByRole } = render(
-      <DxcSlider defaultValue={30} minValue={0} maxValue={100} showLimitsValues showInput />
-    );
+    const { getByRole } = render(<DxcSlider defaultValue={30} showLimitsValues showInput />);
     const slider = getByRole("slider");
     const input = getByRole("textbox") as HTMLInputElement;
     expect(slider.getAttribute("aria-valuenow")).toBe("30");
     expect(input.value).toBe("30");
   });
-
-  test("Slider correct limit values", () => {
+  test("Slider correct limit values", async () => {
     const { getByRole, getByText } = render(
-      <DxcSlider defaultValue={125} minValue={30} maxValue={125} showLimitsValues />
+      <DxcSlider defaultValue={-30} minValue={-30} maxValue={125} showLimitsValues />
     );
     const slider = getByRole("slider");
-    expect(slider.getAttribute("aria-valuemin")).toBe("30");
+    expect(slider.getAttribute("aria-valuemin")).toBe("-30");
     expect(slider.getAttribute("aria-valuemax")).toBe("125");
-    userEvent.tab();
-    fireEvent.keyDown(slider, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39,
-    });
-    expect(slider.getAttribute("aria-valuenow")).toBe("125");
-    expect(getByText("30")).toBeTruthy();
+    expect(getByText("-30")).toBeTruthy();
     expect(getByText("125")).toBeTruthy();
+    expect(slider.getAttribute("aria-valuenow")).toBe("-30");
+    fireEvent.input(slider, { target: { value: "-29" } });
+    expect(slider.getAttribute("aria-valuenow")).toBe("-29");
+  });
+  test("Slider applies correct limit values and never surpasses them", () => {
+    const { getByRole, getByText } = render(
+      <DxcSlider defaultValue={-100} minValue={-100} maxValue={100} showLimitsValues step={100} />
+    );
+    const slider = getByRole("slider") as HTMLInputElement;
+    expect(slider.getAttribute("aria-valuemin")).toBe("-100");
+    expect(slider.getAttribute("aria-valuemax")).toBe("100");
+    expect(getByText("-100")).toBeTruthy();
+    expect(getByText("100")).toBeTruthy();
+    expect(slider.value).toBe("-100");
+    fireEvent.input(slider, { target: { value: "-101" } });
+    expect(slider.value).toBe("-100");
+    fireEvent.input(slider, { target: { value: "101" } });
+    expect(slider.value).toBe("100");
   });
-
   test("Calls correct function onChange in controlled slider", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
-    );
+    const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues value={13} showInput />);
     const input = getByRole("textbox") as HTMLInputElement;
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
     expect(input.value).toBe("13");
@@ -76,26 +76,20 @@ describe("Slider component tests", () => {
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
     expect(input.value).toBe("13");
   });
-
   test("Calls correct function onChange in uncontrolled slider", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues showInput />
-    );
-    const input = getByRole("textbox") as HTMLInputElement;
+    const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues showInput />);
+    const textInput = getByRole("textbox") as HTMLInputElement;
     act(() => {
-      fireEvent.change(input, { target: { value: 25 } });
+      fireEvent.change(textInput, { target: { value: 25 } });
     });
     expect(onChange).toHaveBeenCalledWith(25);
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
-    expect(input.value).toBe("25");
+    expect(textInput.value).toBe("25");
   });
-
   test("Disabled slider have disabled input and slider", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues disabled showInput value={13} />
-    );
+    const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues disabled showInput value={13} />);
     const input = getByRole("textbox") as HTMLInputElement;
     act(() => {
       fireEvent.change(input, { target: { value: 25 } });
@@ -104,7 +98,6 @@ describe("Slider component tests", () => {
     expect(input.value).toBe("13");
     expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
   });
-
   test("Calls correct function onDragEnd when it is uncontrolled", () => {
     const onDragEnd = jest.fn();
     const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} onDragEnd={onDragEnd} showInput />);
@@ -117,7 +110,6 @@ describe("Slider component tests", () => {
     });
     expect(onDragEnd).toHaveBeenCalledWith(120);
   });
-
   test("Calls correct function onDragEnd when it is controlled", () => {
     const onDragEnd = jest.fn();
     const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} value={50} onDragEnd={onDragEnd} showInput />);
@@ -131,7 +123,6 @@ describe("Slider component tests", () => {
     expect(onDragEnd).toHaveBeenCalledWith(120);
     expect(slider.getAttribute("aria-valuenow")).toBe("50");
   });
-
   test("Calls correct function labelFormatCallback", () => {
     const labelFormatCallback = jest.fn((x) => `${x}$`);
     const { getByText } = render(
@@ -148,21 +139,4 @@ describe("Slider component tests", () => {
     expect(getByText("100$")).toBeTruthy();
     expect(labelFormatCallback).toHaveBeenCalledTimes(2);
   });
-
-  test("Change value correctly to 0 from external function", () => {
-    const onChange = jest.fn();
-    const { rerender, getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
-    );
-    const slider = getByRole("slider");
-    userEvent.tab();
-    fireEvent.keyDown(slider, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39,
-    });
-    rerender(<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={0} showInput />);
-    expect(slider.getAttribute("aria-valuenow")).toBe("0");
-  });
 });
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index e9ac38e907..dc700e7884 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -171,7 +171,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
   (
     {
       ariaLabel = "Slider",
-      defaultValue,
+      defaultValue = 0,
       disabled,
       helperText,
       label,
@@ -192,34 +192,32 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     ref
   ): JSX.Element => {
     const labelId = `label-${useId()}`;
-    const [dragging, setDragging] = useState(false);
     const [innerValue, setInnerValue] = useState(defaultValue ?? 0);
     const minLabel = useMemo(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
     const maxLabel = useMemo(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
 
     const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-      const intValue = parseInt(event.target.value, 10);
-      if (intValue !== value || intValue !== innerValue) setInnerValue(intValue);
-      onChange?.(intValue);
-    };
-
-    const handleOnMouseDown = () => {
-      setDragging(true);
+      const sliderIntegerValue = parseInt(event.target.value, 10);
+      if (value == null) setInnerValue(sliderIntegerValue);
+      onChange?.(sliderIntegerValue);
     };
 
     const handleOnMouseUp = (event: MouseEvent<HTMLInputElement>) => {
-      const intValue = parseInt((event.target as HTMLInputElement).value, 10);
-      if (dragging) {
-        setDragging(false);
-        onDragEnd?.(intValue);
-      }
+      const sliderIntegerValue = parseInt((event.target as HTMLInputElement).value, 10);
+      onDragEnd?.(sliderIntegerValue);
     };
 
-    const handlerTextInputOnChange = ({ value }: { value: string; error?: string }) => {
-      const intValue = parseInt(value, 10);
-      if (!Number.isNaN(intValue)) {
-        if (value == null) setInnerValue(intValue > maxValue ? maxValue : intValue);
-        onChange?.(intValue > maxValue ? maxValue : intValue);
+    const handlerTextInputOnChange = (event: { value: string; error?: string }) => {
+      const textInputIntegerValue = parseInt(event.value, 10);
+      if (!Number.isNaN(textInputIntegerValue)) {
+        const validatedInputValue =
+          textInputIntegerValue > maxValue
+            ? maxValue
+            : textInputIntegerValue < minValue
+              ? minValue
+              : textInputIntegerValue;
+        if (value == null) setInnerValue(validatedInputValue);
+        onChange?.(validatedInputValue);
       }
     };
 
@@ -241,17 +239,16 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 aria-orientation="horizontal"
                 aria-valuemax={maxValue}
                 aria-valuemin={minValue}
-                aria-valuenow={value != null && value >= 0 ? value : innerValue}
+                aria-valuenow={value ?? innerValue}
                 disabled={disabled}
                 max={maxValue}
                 min={minValue}
                 onChange={handleOnChange}
                 onMouseUp={handleOnMouseUp}
-                onMouseDown={handleOnMouseDown}
                 role="slider"
                 step={step}
                 type="range"
-                value={value != null && value >= 0 ? value : innerValue}
+                value={value ?? innerValue}
               />
               {marks && (
                 <TicksContainer>
@@ -274,7 +271,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
               name={name}
               onChange={handlerTextInputOnChange}
               size="fillParent"
-              value={value != null && value >= 0 ? value.toString() : innerValue.toString()}
+              value={(value ?? innerValue).toString()}
             />
           )}
         </MainContainer>

From 49a7cd857e2e2840f4da7e8afe5348d7098e146a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 19 Feb 2025 18:31:05 +0100
Subject: [PATCH 03/11] Round up slider enhancements

---
 packages/lib/src/slider/Slider.stories.tsx |  8 ++-
 packages/lib/src/slider/Slider.tsx         | 58 ++++++++++++++--------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/packages/lib/src/slider/Slider.stories.tsx b/packages/lib/src/slider/Slider.stories.tsx
index bd19bd62c5..d1318903e3 100644
--- a/packages/lib/src/slider/Slider.stories.tsx
+++ b/packages/lib/src/slider/Slider.stories.tsx
@@ -57,14 +57,14 @@ const Slider = () => (
       <Title title="Discrete slider with input" theme="light" level={4} />
       <DxcSlider
         defaultValue={20}
-        minValue={0}
+        minValue={10}
         maxValue={50}
         label="Slider"
         helperText="Help message"
         showLimitsValues
         showInput
         marks
-        step={10}
+        step={20}
       />
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
@@ -119,6 +119,10 @@ const Slider = () => (
         size="large"
       />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Rounded up slider" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" showLimitsValues showInput value={15} step={10} marks />
+    </ExampleContainer>
   </>
 );
 
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index dc700e7884..8d18cce170 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -80,6 +80,27 @@ const SliderInputContainer = styled.div`
   height: var(--height-xxxs);
 `;
 
+/**
+ * @param target
+ * @param step
+ * @param min
+ * @param max
+ * @returns the closest tick value to the target value
+ */
+const roundUpPercentage = (target: number, step: number, min: number, max: number) => {
+  if (target < min) return min;
+  if (target > max) return max;
+
+  let percentage = 0;
+  let acc = target - min;
+  for (let tick = min; tick <= max; tick += step) {
+    if (Math.abs(target - tick) <= Math.abs(acc)) {
+      acc = target - tick;
+      percentage = tick;
+    } else break;
+  }
+  return percentage;
+};
 const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
   -webkit-appearance: none;
   width: 12px;
@@ -107,6 +128,7 @@ const SliderInput = styled.input<{
   disabled: SliderPropsType["disabled"];
   min: SliderPropsType["minValue"];
   max: SliderPropsType["maxValue"];
+  step: SliderPropsType["step"];
   value: SliderPropsType["value"];
 }>`
   -webkit-appearance: none;
@@ -120,12 +142,14 @@ const SliderInput = styled.input<{
       ? "linear-gradient(var(--color-fg-neutral-medium), var(--color-fg-neutral-medium))"
       : "linear-gradient(var(--color-fg-secondary-medium), var(--color-fg-secondary-medium))"};
   background-repeat: no-repeat;
-  background-size: ${(props) =>
-    props.value != null &&
-    props.min != null &&
-    props.max != null &&
-    `${((props.value - props.min) * 100) / (props.max - props.min)}% 100%`};
-  border-radius: 5px;
+  ${(props) => {
+    if (props.value != null && props.min != null && props.max != null && props.step != null) {
+      const base10 =
+        (roundUpPercentage(props.value, props.step, props.min, props.max) - props.min) / (props.max - props.min) * 100;
+      return `background-size: ${base10}% 100%;`;
+    }
+  }}
+  border-radius: var(--border-radius-m);
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 
   &::-webkit-slider-thumb {
@@ -156,15 +180,14 @@ const TicksContainer = styled.div`
 
 const Tick = styled.span<{
   disabled: SliderPropsType["disabled"];
-  stepPosition: number;
-  stepValue: SliderPropsType["value"];
+  currentTick: boolean;
 }>`
   background-color: ${({ disabled }) =>
     disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
   border-radius: 50%;
   height: 6px;
   width: 6px;
-  z-index: ${(props) => props.stepValue != null && (props.stepPosition <= props.stepValue ? "-1" : "0")};
+  ${({ currentTick }) => currentTick && "visibility: hidden;"};
 `;
 
 const DxcSlider = forwardRef<RefType, SliderPropsType>(
@@ -208,16 +231,10 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     };
 
     const handlerTextInputOnChange = (event: { value: string; error?: string }) => {
-      const textInputIntegerValue = parseInt(event.value, 10);
+      const textInputIntegerValue = Number(event.value ?? 0);
       if (!Number.isNaN(textInputIntegerValue)) {
-        const validatedInputValue =
-          textInputIntegerValue > maxValue
-            ? maxValue
-            : textInputIntegerValue < minValue
-              ? minValue
-              : textInputIntegerValue;
-        if (value == null) setInnerValue(validatedInputValue);
-        onChange?.(validatedInputValue);
+        if (value == null) setInnerValue(textInputIntegerValue);
+        onChange?.(textInputIntegerValue);
       }
     };
 
@@ -254,10 +271,11 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 <TicksContainer>
                   {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => (
                     <Tick
+                      currentTick={
+                        roundUpPercentage(value ?? innerValue, step, minValue, maxValue) === minValue + index * step
+                      }
                       disabled={disabled}
                       key={`tickmark-${index}`}
-                      stepPosition={(step * index) / (maxValue - minValue)}
-                      stepValue={(value ?? innerValue) / maxValue}
                     />
                   ))}
                 </TicksContainer>

From d0d1346b48e15018d868d80bd8cdf79174dba57f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 20 Feb 2025 11:10:10 +0100
Subject: [PATCH 04/11] Slider updates

---
 .../components/slider/code/SliderCodePage.tsx |  4 +-
 packages/lib/src/slider/Slider.test.tsx       |  1 -
 packages/lib/src/slider/Slider.tsx            | 50 +++----------------
 packages/lib/src/slider/utils.ts              | 37 ++++++++++++++
 4 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 packages/lib/src/slider/utils.ts

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index 518213666d..cdd986b860 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -223,7 +223,9 @@ const sections = [
             <td>
               Specifies a string to be used as the name for the slider element when no <Code>label</Code> is provided.
             </td>
-            <td>'Slider'</td>
+            <td>
+              <TableCode>'Slider'</TableCode>
+            </td>
           </tr>
         </tbody>
       </DxcTable>
diff --git a/packages/lib/src/slider/Slider.test.tsx b/packages/lib/src/slider/Slider.test.tsx
index cbe5ba5016..d2eeaeb84a 100644
--- a/packages/lib/src/slider/Slider.test.tsx
+++ b/packages/lib/src/slider/Slider.test.tsx
@@ -1,5 +1,4 @@
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import DxcSlider from "./Slider";
 
 // Mocking DOMRect for Radix Primitive Popover
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 8d18cce170..32a2b090e4 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -3,18 +3,7 @@ import styled, { css } from "styled-components";
 import DxcTextInput from "../text-input/TextInput";
 import { spaces } from "../common/variables";
 import SliderPropsType, { RefType } from "./types";
-import { getMargin } from "../common/utils";
-
-const sizes = {
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%",
-};
-
-const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPropsType["size"]) =>
-  size === "fillParent"
-    ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
-    : size && sizes[size];
+import { calculateWidth, roundUp } from "./utils";
 
 const SliderContainer = styled.div<{
   margin: SliderPropsType["margin"];
@@ -80,32 +69,12 @@ const SliderInputContainer = styled.div`
   height: var(--height-xxxs);
 `;
 
-/**
- * @param target
- * @param step
- * @param min
- * @param max
- * @returns the closest tick value to the target value
- */
-const roundUpPercentage = (target: number, step: number, min: number, max: number) => {
-  if (target < min) return min;
-  if (target > max) return max;
-
-  let percentage = 0;
-  let acc = target - min;
-  for (let tick = min; tick <= max; tick += step) {
-    if (Math.abs(target - tick) <= Math.abs(acc)) {
-      acc = target - tick;
-      percentage = tick;
-    } else break;
-  }
-  return percentage;
-};
 const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
   -webkit-appearance: none;
   width: 12px;
   height: var(--height-xxxs);
   background: ${disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
+  border: none;
   border-radius: 50%;
   transition:
     width 0.2s ease,
@@ -142,10 +111,9 @@ const SliderInput = styled.input<{
       ? "linear-gradient(var(--color-fg-neutral-medium), var(--color-fg-neutral-medium))"
       : "linear-gradient(var(--color-fg-secondary-medium), var(--color-fg-secondary-medium))"};
   background-repeat: no-repeat;
-  ${(props) => {
-    if (props.value != null && props.min != null && props.max != null && props.step != null) {
-      const base10 =
-        (roundUpPercentage(props.value, props.step, props.min, props.max) - props.min) / (props.max - props.min) * 100;
+  ${({ value, step, min, max }) => {
+    if (value != null && min != null && max != null && step != null) {
+      const base10 = ((roundUp(value, step, min, max) - min) / (max - min)) * 100;
       return `background-size: ${base10}% 100%;`;
     }
   }}
@@ -220,13 +188,13 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     const maxLabel = useMemo(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
 
     const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-      const sliderIntegerValue = parseInt(event.target.value, 10);
+      const sliderIntegerValue = Number(event.target.value);
       if (value == null) setInnerValue(sliderIntegerValue);
       onChange?.(sliderIntegerValue);
     };
 
     const handleOnMouseUp = (event: MouseEvent<HTMLInputElement>) => {
-      const sliderIntegerValue = parseInt((event.target as HTMLInputElement).value, 10);
+      const sliderIntegerValue = Number((event.target as HTMLInputElement).value);
       onDragEnd?.(sliderIntegerValue);
     };
 
@@ -271,9 +239,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 <TicksContainer>
                   {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => (
                     <Tick
-                      currentTick={
-                        roundUpPercentage(value ?? innerValue, step, minValue, maxValue) === minValue + index * step
-                      }
+                      currentTick={roundUp(value ?? innerValue, step, minValue, maxValue) === minValue + index * step}
                       disabled={disabled}
                       key={`tickmark-${index}`}
                     />
diff --git a/packages/lib/src/slider/utils.ts b/packages/lib/src/slider/utils.ts
new file mode 100644
index 0000000000..fa6e27a836
--- /dev/null
+++ b/packages/lib/src/slider/utils.ts
@@ -0,0 +1,37 @@
+import SliderPropsType from "./types";
+import { getMargin } from "../common/utils";
+
+const sizes = {
+  medium: "360px",
+  large: "480px",
+  fillParent: "100%",
+};
+
+export const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPropsType["size"]) =>
+  size === "fillParent"
+    ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
+    : size && sizes[size];
+
+/**
+ * This function calculates the closest tick value to the target value within the range [min, max].
+ * 
+ * @param target the target value to round up
+ * @param step the step value that defines the ticks from the range
+ * @param min the minimum value of the range
+ * @param max the maximum value of the range
+ * @returns the closest tick value to the target value
+ */
+export const roundUp = (target: number, step: number, min: number, max: number) => {
+  if (target < min) return min;
+  else if (target > max) return max;
+
+  let percentage = 0;
+  let acc = target - min;
+  for (let tick = min; tick <= max; tick += step) {
+    if (Math.abs(target - tick) <= Math.abs(acc)) {
+      percentage = tick;
+      acc = target - tick;
+    } else break;
+  }
+  return percentage;
+};
\ No newline at end of file

From acbba598ca4c45f941b2d3dd717ffc9b2b9b2246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 20 Feb 2025 13:20:24 +0100
Subject: [PATCH 05/11] Small enhacements on round up

---
 packages/lib/src/slider/Slider.tsx | 24 +++++++++++++-----------
 packages/lib/src/slider/utils.ts   |  1 +
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 32a2b090e4..48bf7e3b85 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -95,10 +95,9 @@ const thumbFocusStyles = css`
 `;
 const SliderInput = styled.input<{
   disabled: SliderPropsType["disabled"];
-  min: SliderPropsType["minValue"];
-  max: SliderPropsType["maxValue"];
-  step: SliderPropsType["step"];
-  value: SliderPropsType["value"];
+  min: Required<SliderPropsType>["minValue"];
+  max: Required<SliderPropsType>["maxValue"];
+  roundedUpValue: number;
 }>`
   -webkit-appearance: none;
   margin: 0;
@@ -111,11 +110,9 @@ const SliderInput = styled.input<{
       ? "linear-gradient(var(--color-fg-neutral-medium), var(--color-fg-neutral-medium))"
       : "linear-gradient(var(--color-fg-secondary-medium), var(--color-fg-secondary-medium))"};
   background-repeat: no-repeat;
-  ${({ value, step, min, max }) => {
-    if (value != null && min != null && max != null && step != null) {
-      const base10 = ((roundUp(value, step, min, max) - min) / (max - min)) * 100;
-      return `background-size: ${base10}% 100%;`;
-    }
+  ${({ min, max, roundedUpValue }) => {
+    const base10 = ((roundedUpValue - min) / (max - min)) * 100;
+    return `background-size: ${base10}% 100%;`;
   }}
   border-radius: var(--border-radius-m);
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
@@ -183,7 +180,11 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     ref
   ): JSX.Element => {
     const labelId = `label-${useId()}`;
-    const [innerValue, setInnerValue] = useState(defaultValue ?? 0);
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const roundedUpValue = useMemo(
+      () => roundUp(value ?? innerValue, step, minValue, maxValue),
+      [innerValue, maxValue, minValue, step, value]
+    );
     const minLabel = useMemo(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
     const maxLabel = useMemo(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
 
@@ -231,6 +232,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 onChange={handleOnChange}
                 onMouseUp={handleOnMouseUp}
                 role="slider"
+                roundedUpValue={roundedUpValue}
                 step={step}
                 type="range"
                 value={value ?? innerValue}
@@ -239,7 +241,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 <TicksContainer>
                   {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => (
                     <Tick
-                      currentTick={roundUp(value ?? innerValue, step, minValue, maxValue) === minValue + index * step}
+                      currentTick={roundedUpValue === minValue + index * step}
                       disabled={disabled}
                       key={`tickmark-${index}`}
                     />
diff --git a/packages/lib/src/slider/utils.ts b/packages/lib/src/slider/utils.ts
index fa6e27a836..42082e63a1 100644
--- a/packages/lib/src/slider/utils.ts
+++ b/packages/lib/src/slider/utils.ts
@@ -24,6 +24,7 @@ export const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPr
 export const roundUp = (target: number, step: number, min: number, max: number) => {
   if (target < min) return min;
   else if (target > max) return max;
+  else if (step === 1) return target;
 
   let percentage = 0;
   let acc = target - min;

From 61417dca8c59bfdaa7ddf77b92d6640864f8a017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 24 Feb 2025 12:46:21 +0100
Subject: [PATCH 06/11] Design updates

---
 packages/lib/src/slider/Slider.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 48bf7e3b85..47653f6e4e 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -67,13 +67,14 @@ const SliderInputContainer = styled.div`
   display: flex;
   align-items: center;
   height: var(--height-xxxs);
+  min-width: 184px;
 `;
 
 const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
   -webkit-appearance: none;
   width: 12px;
   height: var(--height-xxxs);
-  background: ${disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
+  background-color: ${disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
   border: none;
   border-radius: 50%;
   transition:
@@ -84,9 +85,9 @@ const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
   }
   &:hover {
     ${!disabled &&
-    `height: var(--height-xxs);
-     width: 16px;
-     background-color: var(--color-fg-secondary-strong);`}
+    `background-color: var(--color-fg-secondary-strong);
+     height: var(--height-xxs);
+     width: 16px;`}
   }
 `;
 const thumbFocusStyles = css`
@@ -150,8 +151,8 @@ const Tick = styled.span<{
   background-color: ${({ disabled }) =>
     disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-secondary-medium)"};
   border-radius: 50%;
-  height: 6px;
-  width: 6px;
+  height: 4px;
+  width: 4px;
   ${({ currentTick }) => currentTick && "visibility: hidden;"};
 `;
 

From 7f8fa8696da92bc4de5840c4fa3bdda8a70ccb90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 26 Feb 2025 14:40:44 +0100
Subject: [PATCH 07/11] Number input, fixed rounding, new example & more

---
 .../components/slider/code/SliderCodePage.tsx |  5 ++
 .../slider/code/examples/complex.ts           | 35 ++++++++++++++
 packages/lib/src/slider/Slider.tsx            | 47 +++++++++++--------
 packages/lib/src/slider/utils.ts              | 44 ++++++++++++-----
 4 files changed, 99 insertions(+), 32 deletions(-)
 create mode 100644 apps/website/screens/components/slider/code/examples/complex.ts

diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index cdd986b860..5ac12d89ed 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -8,6 +8,7 @@ import controlled from "./examples/controlled";
 import uncontrolled from "./examples/uncontrolled";
 import formatLabel from "./examples/formatLabel";
 import TableCode from "@/common/TableCode";
+import complex from "./examples/complex";
 
 const sections = [
   {
@@ -246,6 +247,10 @@ const sections = [
         title: "Format label",
         content: <Example example={formatLabel} defaultIsVisible />,
       },
+      {
+        title: "Decimals and negatives",
+        content: <Example example={complex} defaultIsVisible />,
+      },
     ],
   },
 ];
diff --git a/apps/website/screens/components/slider/code/examples/complex.ts b/apps/website/screens/components/slider/code/examples/complex.ts
new file mode 100644
index 0000000000..6a69e40d00
--- /dev/null
+++ b/apps/website/screens/components/slider/code/examples/complex.ts
@@ -0,0 +1,35 @@
+import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+  const [value, changeValue] = useState(0);
+  const onChange = (newValue) => {
+    changeValue(newValue);
+  };
+
+  return (
+    <DxcInset space="2rem">
+      <DxcSlider 
+        helperText="Help message"
+        label="Slider"
+        marks
+        maxValue={1}
+        minValue={-1}
+        onChange={onChange}
+        showInput
+        showLimitsValues
+        step={0.1}
+        value={value}
+      />
+      <span>Current value: {value}</span>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcSlider,
+  DxcInset,
+  useState,
+};
+
+export default { code, scope };
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index 47653f6e4e..b57c3d50f1 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -1,9 +1,9 @@
 import { ChangeEvent, forwardRef, MouseEvent, useId, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
-import DxcTextInput from "../text-input/TextInput";
 import { spaces } from "../common/variables";
 import SliderPropsType, { RefType } from "./types";
-import { calculateWidth, roundUp } from "./utils";
+import { calculateWidth, roundUp, stepPrecision } from "./utils";
+import DxcNumberInput from "../number-input/NumberInput";
 
 const SliderContainer = styled.div<{
   margin: SliderPropsType["margin"];
@@ -96,9 +96,9 @@ const thumbFocusStyles = css`
 `;
 const SliderInput = styled.input<{
   disabled: SliderPropsType["disabled"];
-  min: Required<SliderPropsType>["minValue"];
   max: Required<SliderPropsType>["maxValue"];
-  roundedUpValue: number;
+  min: Required<SliderPropsType>["minValue"];
+  value: Required<SliderPropsType>["value"];
 }>`
   -webkit-appearance: none;
   margin: 0;
@@ -111,8 +111,8 @@ const SliderInput = styled.input<{
       ? "linear-gradient(var(--color-fg-neutral-medium), var(--color-fg-neutral-medium))"
       : "linear-gradient(var(--color-fg-secondary-medium), var(--color-fg-secondary-medium))"};
   background-repeat: no-repeat;
-  ${({ min, max, roundedUpValue }) => {
-    const base10 = ((roundedUpValue - min) / (max - min)) * 100;
+  ${({ max, min, value }) => {
+    const base10 = ((value - min) / (max - min)) * 100;
     return `background-size: ${base10}% 100%;`;
   }}
   border-radius: var(--border-radius-m);
@@ -182,6 +182,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
   ): JSX.Element => {
     const labelId = `label-${useId()}`;
     const [innerValue, setInnerValue] = useState(defaultValue);
+    const [inputValue, setInputValue] = useState(defaultValue.toString());
     const roundedUpValue = useMemo(
       () => roundUp(value ?? innerValue, step, minValue, maxValue),
       [innerValue, maxValue, minValue, step, value]
@@ -192,6 +193,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
       const sliderIntegerValue = Number(event.target.value);
       if (value == null) setInnerValue(sliderIntegerValue);
+      setInputValue(sliderIntegerValue.toString());
       onChange?.(sliderIntegerValue);
     };
 
@@ -200,8 +202,9 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       onDragEnd?.(sliderIntegerValue);
     };
 
-    const handlerTextInputOnChange = (event: { value: string; error?: string }) => {
-      const textInputIntegerValue = Number(event.value ?? 0);
+    const handlerNumberInputOnChange = (event: { value: string; error?: string }) => {
+      setInputValue(event.value);
+      const textInputIntegerValue = Number(event.value);
       if (!Number.isNaN(textInputIntegerValue)) {
         if (value == null) setInnerValue(textInputIntegerValue);
         onChange?.(textInputIntegerValue);
@@ -233,32 +236,36 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
                 onChange={handleOnChange}
                 onMouseUp={handleOnMouseUp}
                 role="slider"
-                roundedUpValue={roundedUpValue}
                 step={step}
                 type="range"
-                value={value ?? innerValue}
+                value={roundedUpValue}
               />
               {marks && (
                 <TicksContainer>
-                  {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => (
-                    <Tick
-                      currentTick={roundedUpValue === minValue + index * step}
-                      disabled={disabled}
-                      key={`tickmark-${index}`}
-                    />
-                  ))}
+                  {Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => {
+                    const tick = minValue + index * step;
+                    return (
+                      <Tick
+                        currentTick={roundedUpValue === stepPrecision(tick, step)}
+                        disabled={disabled}
+                        key={`tickmark-${index}`}
+                      />
+                    );
+                  })}
                 </TicksContainer>
               )}
             </SliderInputContainer>
             {showLimitsValues && <LimitLabel disabled={disabled}>{maxLabel}</LimitLabel>}
           </LimitsValueGrid>
           {showInput && (
-            <DxcTextInput
+            <DxcNumberInput
               disabled={disabled}
               name={name}
-              onChange={handlerTextInputOnChange}
+              onChange={handlerNumberInputOnChange}
+              showControls={false}
               size="fillParent"
-              value={(value ?? innerValue).toString()}
+              step={step}
+              value={inputValue}
             />
           )}
         </MainContainer>
diff --git a/packages/lib/src/slider/utils.ts b/packages/lib/src/slider/utils.ts
index 42082e63a1..61039c534f 100644
--- a/packages/lib/src/slider/utils.ts
+++ b/packages/lib/src/slider/utils.ts
@@ -12,6 +12,21 @@ export const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPr
     ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
     : size && sizes[size];
 
+/**
+ * Rounds a number to a specific number of decimal places.
+ * this function tries to avoid floating point inaccuracies, present in JS:
+ * 
+ * 0.1 + 0.2 === 0.3 // false
+ * 
+ * @param number the number to round
+ * @param step slider step value that defines the number of decimal places
+ * @returns the rounded number
+ */
+export const stepPrecision = (target: number, step: number) => {
+  const precision = step.toString().split(".")[1]?.length ?? 0;
+  return Number(target.toFixed(precision));
+};
+
 /**
  * This function calculates the closest tick value to the target value within the range [min, max].
  * 
@@ -21,18 +36,23 @@ export const calculateWidth = (margin: SliderPropsType["margin"], size: SliderPr
  * @param max the maximum value of the range
  * @returns the closest tick value to the target value
  */
-export const roundUp = (target: number, step: number, min: number, max: number) => {
-  if (target < min) return min;
+export const roundUp = (target: number, step: number, min: number, max: number): number => {
+  if (target === 0) return 0;
+  else if (target < min) return min;
   else if (target > max) return max;
-  else if (step === 1) return target;
+  else if (step === 1) return Math.round(target);
 
-  let percentage = 0;
-  let acc = target - min;
-  for (let tick = min; tick <= max; tick += step) {
-    if (Math.abs(target - tick) <= Math.abs(acc)) {
-      percentage = tick;
-      acc = target - tick;
+  const ticks = Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, index) => stepPrecision(min + index * step, step));
+  if (ticks.includes(target)) return target;
+
+  let rounded = 0;
+  let acc = Infinity;
+  for (const tick of ticks) {
+    const diff = Math.abs(stepPrecision(target - tick, target));
+    if (diff < Math.abs(acc) || (diff === Math.abs(acc) && target > 0)) {
+      rounded = tick;
+      acc = diff;
     } else break;
-  }
-  return percentage;
-};
\ No newline at end of file
+  };
+  return rounded;
+};

From 4cbc00c17b7389de9116d3f0c5db482300e3c359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 26 Feb 2025 17:41:06 +0100
Subject: [PATCH 08/11] More functionality added to the Slider

---
 packages/lib/src/slider/Slider.test.tsx | 67 +++++++++++++++++++------
 packages/lib/src/slider/Slider.tsx      | 27 ++++++----
 packages/lib/src/slider/utils.ts        |  4 +-
 3 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/packages/lib/src/slider/Slider.test.tsx b/packages/lib/src/slider/Slider.test.tsx
index d2eeaeb84a..e872b29bec 100644
--- a/packages/lib/src/slider/Slider.test.tsx
+++ b/packages/lib/src/slider/Slider.test.tsx
@@ -30,7 +30,7 @@ describe("Slider component tests", () => {
   test("Slider renders with correct initial value when it is uncontrolled", () => {
     const { getByRole } = render(<DxcSlider defaultValue={30} showLimitsValues showInput />);
     const slider = getByRole("slider");
-    const input = getByRole("textbox") as HTMLInputElement;
+    const input = getByRole("spinbutton") as HTMLInputElement;
     expect(slider.getAttribute("aria-valuenow")).toBe("30");
     expect(input.value).toBe("30");
   });
@@ -65,7 +65,7 @@ describe("Slider component tests", () => {
   test("Calls correct function onChange in controlled slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues value={13} showInput />);
-    const input = getByRole("textbox") as HTMLInputElement;
+    const input = getByRole("spinbutton") as HTMLInputElement;
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
     expect(input.value).toBe("13");
     act(() => {
@@ -73,12 +73,12 @@ describe("Slider component tests", () => {
     });
     expect(onChange).toHaveBeenCalledWith(25);
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
-    expect(input.value).toBe("13");
+    expect(input.value).toBe("25");
   });
   test("Calls correct function onChange in uncontrolled slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues showInput />);
-    const textInput = getByRole("textbox") as HTMLInputElement;
+    const textInput = getByRole("spinbutton") as HTMLInputElement;
     act(() => {
       fireEvent.change(textInput, { target: { value: 25 } });
     });
@@ -86,17 +86,6 @@ describe("Slider component tests", () => {
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
     expect(textInput.value).toBe("25");
   });
-  test("Disabled slider have disabled input and slider", () => {
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcSlider onChange={onChange} showLimitsValues disabled showInput value={13} />);
-    const input = getByRole("textbox") as HTMLInputElement;
-    act(() => {
-      fireEvent.change(input, { target: { value: 25 } });
-    });
-    expect(input.hasAttribute("disabled")).toBeTruthy();
-    expect(input.value).toBe("13");
-    expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
-  });
   test("Calls correct function onDragEnd when it is uncontrolled", () => {
     const onDragEnd = jest.fn();
     const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} onDragEnd={onDragEnd} showInput />);
@@ -138,4 +127,52 @@ describe("Slider component tests", () => {
     expect(getByText("100$")).toBeTruthy();
     expect(labelFormatCallback).toHaveBeenCalledTimes(2);
   });
+  test("Non-valid values in the number input do not update the slider value: special characters", () => {
+    const { getByRole } = render(<DxcSlider showLimitsValues showInput defaultValue={23} />);
+    const input = getByRole("spinbutton") as HTMLInputElement;
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.change(input, { target: { value: "-" } });
+    });
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+    fireEvent.blur(input);
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+    expect(input.value).toBe("0");
+  });
+  test("Non-valid values in the number input: values which do not respect the step are rounded up", () => {
+    const { getByRole } = render(<DxcSlider showLimitsValues showInput step={0.1} minValue={-1} maxValue={1} />);
+    const input = getByRole("spinbutton") as HTMLInputElement;
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.change(input, { target: { value: "-0.15" } });
+    });
+    expect(slider.getAttribute("aria-valuenow")).toBe("-0.15");
+    fireEvent.blur(input);
+    expect(slider.getAttribute("aria-valuenow")).toBe("-0.2");
+    expect(input.value).toBe("-0.2");
+  });
+  test("Non-valid values in the number input: values that surpass the maximum limit are set to the maximum possible value", () => {
+    const { getByRole } = render(<DxcSlider showLimitsValues showInput step={5} minValue={-10} maxValue={10} />);
+    const input = getByRole("spinbutton") as HTMLInputElement;
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.change(input, { target: { value: "15" } });
+    });
+    expect(slider.getAttribute("aria-valuenow")).toBe("15");
+    fireEvent.blur(input);
+    expect(slider.getAttribute("aria-valuenow")).toBe("10");
+    expect(input.value).toBe("10");
+  });
+  test("Non-valid values in the number input: values that surpass the minimum limit are set to the minimum possible value", () => {
+    const { getByRole } = render(<DxcSlider showLimitsValues showInput step={5} minValue={-10} maxValue={10} />);
+    const input = getByRole("spinbutton") as HTMLInputElement;
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.change(input, { target: { value: "-200" } });
+    });
+    expect(slider.getAttribute("aria-valuenow")).toBe("-200");
+    fireEvent.blur(input);
+    expect(slider.getAttribute("aria-valuenow")).toBe("-10");
+    expect(input.value).toBe("-10");
+  });
 });
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index b57c3d50f1..cc4d87ac0d 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -182,7 +182,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
   ): JSX.Element => {
     const labelId = `label-${useId()}`;
     const [innerValue, setInnerValue] = useState(defaultValue);
-    const [inputValue, setInputValue] = useState(defaultValue.toString());
+    const [inputValue, setInputValue] = useState((value ?? defaultValue).toString());
     const roundedUpValue = useMemo(
       () => roundUp(value ?? innerValue, step, minValue, maxValue),
       [innerValue, maxValue, minValue, step, value]
@@ -190,11 +190,15 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     const minLabel = useMemo(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
     const maxLabel = useMemo(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
 
+    const changeValue = (newValue: string) => {
+      if (showInput) setInputValue(newValue);
+      const numberValue = Number(newValue);
+      if (value == null) setInnerValue(numberValue);
+      onChange?.(numberValue);
+    };
+
     const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-      const sliderIntegerValue = Number(event.target.value);
-      if (value == null) setInnerValue(sliderIntegerValue);
-      setInputValue(sliderIntegerValue.toString());
-      onChange?.(sliderIntegerValue);
+      changeValue(event.target.value);
     };
 
     const handleOnMouseUp = (event: MouseEvent<HTMLInputElement>) => {
@@ -203,12 +207,14 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
     };
 
     const handlerNumberInputOnChange = (event: { value: string; error?: string }) => {
-      setInputValue(event.value);
+      changeValue(event.value);
+    };
+
+    const handlerNumberInputOnBlur = (event: { value: string; error?: string }) => {
       const textInputIntegerValue = Number(event.value);
-      if (!Number.isNaN(textInputIntegerValue)) {
-        if (value == null) setInnerValue(textInputIntegerValue);
-        onChange?.(textInputIntegerValue);
-      }
+      if (textInputIntegerValue < minValue) changeValue(minValue.toString());
+      else if (textInputIntegerValue > maxValue) changeValue(maxValue.toString());
+      else changeValue(roundUp(textInputIntegerValue, step, minValue, maxValue).toString());
     };
 
     return (
@@ -261,6 +267,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
             <DxcNumberInput
               disabled={disabled}
               name={name}
+              onBlur={handlerNumberInputOnBlur}
               onChange={handlerNumberInputOnChange}
               showControls={false}
               size="fillParent"
diff --git a/packages/lib/src/slider/utils.ts b/packages/lib/src/slider/utils.ts
index 61039c534f..f6572672b0 100644
--- a/packages/lib/src/slider/utils.ts
+++ b/packages/lib/src/slider/utils.ts
@@ -38,8 +38,8 @@ export const stepPrecision = (target: number, step: number) => {
  */
 export const roundUp = (target: number, step: number, min: number, max: number): number => {
   if (target === 0) return 0;
-  else if (target < min) return min;
-  else if (target > max) return max;
+  else if (target <= min) return min;
+  else if (target >= max) return max;
   else if (step === 1) return Math.round(target);
 
   const ticks = Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, index) => stepPrecision(min + index * step, step));

From 075500c821b4b561e23c548c51b8f20683117cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 18 Mar 2025 12:47:44 +0100
Subject: [PATCH 09/11] Slider documentation

---
 apps/website/pages/components/slider/code.tsx |  17 +
 .../website/pages/components/slider/index.tsx |  24 +-
 .../components/slider/specifications.tsx      |  21 -
 .../website/pages/components/slider/usage.tsx |  21 -
 .../components/slider/SliderPageLayout.tsx    |  12 +-
 .../components/slider/code/SliderCodePage.tsx | 166 ++--
 .../slider/overview/SliderOverviewPage.tsx    | 232 ++++++
 .../slider/overview/examples/continuous.ts    |  34 +
 .../slider/overview/examples/discrete.ts      |  33 +
 .../{usage => overview}/examples/input.ts     |   0
 .../slider/overview/images/slider_anatomy.png | Bin 0 -> 38164 bytes
 .../slider/specs/SliderSpecsPage.tsx          | 773 ------------------
 .../slider/specs/images/slider_anatomy.png    | Bin 15913 -> 0 bytes
 .../slider/specs/images/slider_specs.png      | Bin 20738 -> 0 bytes
 .../slider/specs/images/slider_states.png     | Bin 22824 -> 0 bytes
 .../slider/usage/SliderUsagePage.tsx          |  86 --
 .../slider/usage/examples/variants.ts         |  47 --
 packages/lib/src/slider/Slider.tsx            |   2 +-
 18 files changed, 408 insertions(+), 1060 deletions(-)
 create mode 100644 apps/website/pages/components/slider/code.tsx
 delete mode 100644 apps/website/pages/components/slider/specifications.tsx
 delete mode 100644 apps/website/pages/components/slider/usage.tsx
 create mode 100644 apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
 create mode 100644 apps/website/screens/components/slider/overview/examples/continuous.ts
 create mode 100644 apps/website/screens/components/slider/overview/examples/discrete.ts
 rename apps/website/screens/components/slider/{usage => overview}/examples/input.ts (100%)
 create mode 100644 apps/website/screens/components/slider/overview/images/slider_anatomy.png
 delete mode 100644 apps/website/screens/components/slider/specs/SliderSpecsPage.tsx
 delete mode 100644 apps/website/screens/components/slider/specs/images/slider_anatomy.png
 delete mode 100644 apps/website/screens/components/slider/specs/images/slider_specs.png
 delete mode 100644 apps/website/screens/components/slider/specs/images/slider_states.png
 delete mode 100644 apps/website/screens/components/slider/usage/SliderUsagePage.tsx
 delete mode 100644 apps/website/screens/components/slider/usage/examples/variants.ts

diff --git a/apps/website/pages/components/slider/code.tsx b/apps/website/pages/components/slider/code.tsx
new file mode 100644
index 0000000000..3416f2d698
--- /dev/null
+++ b/apps/website/pages/components/slider/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import SliderPageLayout from "screens/components/slider/SliderPageLayout";
+import SliderCodePage from "screens/components/slider/code/SliderCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Slider — Halstack Design System</title>
+    </Head>
+    <SliderCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <SliderPageLayout>{page}</SliderPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/slider/index.tsx b/apps/website/pages/components/slider/index.tsx
index c09eca28bd..c62aaf82a6 100644
--- a/apps/website/pages/components/slider/index.tsx
+++ b/apps/website/pages/components/slider/index.tsx
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import SliderPageLayout from "screens/components/slider/SliderPageLayout";
-import SliderCodePage from "screens/components/slider/code/SliderCodePage";
+import SliderOverviewPage from "screens/components/slider/overview/SliderOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Slider — Halstack Design System</title>
-      </Head>
-      <SliderCodePage></SliderCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Slider — Halstack Design System</title>
+    </Head>
+    <SliderOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <SliderPageLayout>{page}</SliderPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <SliderPageLayout>{page}</SliderPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/slider/specifications.tsx b/apps/website/pages/components/slider/specifications.tsx
deleted file mode 100644
index 5dec61c532..0000000000
--- a/apps/website/pages/components/slider/specifications.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import SliderPageLayout from "screens/components/slider/SliderPageLayout";
-import SliderSpecsPage from "screens/components/slider/specs/SliderSpecsPage";
-
-const Specifications = () => {
-  return (
-    <>
-      <Head>
-        <title>Slider Specs — Halstack Design System</title>
-      </Head>
-      <SliderSpecsPage></SliderSpecsPage>
-    </>
-  );
-};
-
-Specifications.getLayout = function getLayout(page: ReactElement) {
-  return <SliderPageLayout>{page}</SliderPageLayout>;
-};
-
-export default Specifications;
diff --git a/apps/website/pages/components/slider/usage.tsx b/apps/website/pages/components/slider/usage.tsx
deleted file mode 100644
index 4e62329393..0000000000
--- a/apps/website/pages/components/slider/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import SliderPageLayout from "screens/components/slider/SliderPageLayout";
-import SliderUsagePage from "screens/components/slider/usage/SliderUsagePage";
-
-const Usage = () => {
-  return (
-    <>
-      <Head>
-        <title>Slider Usage — Halstack Design System</title>
-      </Head>
-      <SliderUsagePage></SliderUsagePage>
-    </>
-  );
-};
-
-Usage.getLayout = function getLayout(page: ReactElement) {
-  return <SliderPageLayout>{page}</SliderPageLayout>;
-};
-
-export default Usage;
diff --git a/apps/website/screens/components/slider/SliderPageLayout.tsx b/apps/website/screens/components/slider/SliderPageLayout.tsx
index fe27cda196..98d94da228 100644
--- a/apps/website/screens/components/slider/SliderPageLayout.tsx
+++ b/apps/website/screens/components/slider/SliderPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const SliderPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/slider" },
-    { label: "Usage", path: "/components/slider/usage" },
-    { label: "Specifications", path: "/components/slider/specifications" },
+    { label: "Overview", path: "/components/slider" },
+    { label: "Code", path: "/components/slider/code" },
   ];
 
   return (
@@ -17,11 +16,10 @@ const SliderPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Slider" />
           <DxcParagraph>
-            Slider control allows users to select a specific value or a range of values from a set. Usually, slider
-            presents a relatively large dataset and the way that the user interacts with it is helpful to explore the
-            multiple options swiftly.
+            Slider control enables users to select a specific value from a predefined set by dragging a thumb along a
+            track.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}
diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index 5ac12d89ed..38eb04fbe3 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -25,41 +25,36 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>defaultValue</td>
+            <td>ariaLabel</td>
             <td>
-              <TableCode>number</TableCode>
+              <TableCode>string</TableCode>
             </td>
-            <td>Initial value of the slider, only when it is uncontrolled.</td>
             <td>
-              <TableCode>0</TableCode>
+              Specifies a string to be used as the name for the slider element when no <Code>label</Code> is provided.
+            </td>
+            <td>
+              <TableCode>'Slider'</TableCode>
             </td>
           </tr>
           <tr>
-            <td>value</td>
+            <td>defaultValue</td>
             <td>
               <TableCode>number</TableCode>
             </td>
+            <td>Initial value of the slider, only when it is uncontrolled.</td>
             <td>
-              The selected value. If undefined, the component will be uncontrolled and the value will be managed
-              internally by the component.
+              <TableCode>0</TableCode>
             </td>
-            <td>-</td>
           </tr>
           <tr>
-            <td>label</td>
+            <td>disabled</td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
-            <td>Text to be placed above the slider.</td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>name</td>
+            <td>If true, the component will be disabled.</td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>false</TableCode>
             </td>
-            <td>Name attribute of the input element.</td>
-            <td>-</td>
           </tr>
           <tr>
             <td>helperText</td>
@@ -70,76 +65,71 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>minValue</td>
-            <td>
-              <TableCode>number</TableCode>
-            </td>
-            <td>The minimum value available for selection.</td>
+            <td>label</td>
             <td>
-              <TableCode>0</TableCode>
+              <TableCode>string</TableCode>
             </td>
+            <td>Text to be placed above the slider.</td>
+            <td>-</td>
           </tr>
           <tr>
-            <td>maxValue</td>
+            <td>labelFormatCallback</td>
             <td>
-              <TableCode>number</TableCode>
+              <TableCode>{"(value: number) => string"}</TableCode>
             </td>
-            <td>The maximum value available for selection.</td>
             <td>
-              <TableCode>100</TableCode>
+              This function will be used to format the labels displayed next to the slider. The value will be passed as
+              parameter and the function must return the formatted value.
             </td>
+            <td>-</td>
           </tr>
           <tr>
-            <td>step</td>
-            <td>
-              <TableCode>number</TableCode>
-            </td>
-            <td>The step interval between values available for selection.</td>
+            <td>name</td>
             <td>
-              <TableCode>1</TableCode>
+              <TableCode>string</TableCode>
             </td>
+            <td>Name attribute of the input element.</td>
+            <td>-</td>
           </tr>
           <tr>
-            <td>showLimitsValues</td>
+            <td>margin</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
             </td>
-            <td>Whether the min/max value labels should be displayed next to the slider.</td>
             <td>
-              <TableCode>false</TableCode>
+              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+              'right' properties in order to specify different margin sizes.
             </td>
+            <td>-</td>
           </tr>
           <tr>
-            <td>showInput</td>
+            <td>marks</td>
             <td>
               <TableCode>boolean</TableCode>
             </td>
-            <td>
-              Whether the input element for displaying/controlling the slider value should be displayed next to the
-              slider.
-            </td>
+            <td>Whether the marks between each step should be shown or not.</td>
             <td>
               <TableCode>false</TableCode>
             </td>
           </tr>
           <tr>
-            <td>disabled</td>
+            <td>maxValue</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>number</TableCode>
             </td>
-            <td>If true, the component will be disabled.</td>
+            <td>The maximum value available for selection.</td>
             <td>
-              <TableCode>false</TableCode>
+              <TableCode>100</TableCode>
             </td>
           </tr>
           <tr>
-            <td>marks</td>
+            <td>minValue</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>number</TableCode>
             </td>
-            <td>Whether the marks between each step should be shown or not.</td>
+            <td>The minimum value available for selection.</td>
             <td>
-              <TableCode>false</TableCode>
+              <TableCode>0</TableCode>
             </td>
           </tr>
           <tr>
@@ -165,26 +155,35 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>labelFormatCallback</td>
+            <td>ref</td>
             <td>
-              <TableCode>{"(value: number) => string"}</TableCode>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
+            </td>
+            <td>Reference to the component.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>showInput</td>
+            <td>
+              <TableCode>boolean</TableCode>
             </td>
             <td>
-              This function will be used to format the labels displayed next to the slider. The value will be passed as
-              parameter and the function must return the formatted value.
+              Whether the input element for displaying/controlling the slider value should be displayed next to the
+              slider.
+            </td>
+            <td>
+              <TableCode>false</TableCode>
             </td>
-            <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
+            <td>showLimitsValues</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
+            <td>Whether the min/max value labels should be displayed next to the slider.</td>
             <td>
-              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
-              'right' properties in order to specify different margin sizes.
+              <TableCode>false</TableCode>
             </td>
-            <td>-</td>
           </tr>
           <tr>
             <td>size</td>
@@ -197,36 +196,25 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>tabIndex</td>
+            <td>step</td>
             <td>
               <TableCode>number</TableCode>
             </td>
+            <td>The step interval between values available for selection.</td>
             <td>
-              Value of the <Code>tabindex</Code> attribute.
-            </td>
-            <td>
-              <TableCode>0</TableCode>
-            </td>
-          </tr>
-          <tr>
-            <td>ref</td>
-            <td>
-              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
+              <TableCode>1</TableCode>
             </td>
-            <td>Reference to the component.</td>
-            <td>-</td>
           </tr>
           <tr>
-            <td>ariaLabel</td>
-            <td>
-              <TableCode>string</TableCode>
-            </td>
+            <td>value</td>
             <td>
-              Specifies a string to be used as the name for the slider element when no <Code>label</Code> is provided.
+              <TableCode>number</TableCode>
             </td>
             <td>
-              <TableCode>'Slider'</TableCode>
+              The selected value. If undefined, the component will be uncontrolled and the value will be managed
+              internally by the component.
             </td>
+            <td>-</td>
           </tr>
         </tbody>
       </DxcTable>
@@ -255,15 +243,13 @@ const sections = [
   },
 ];
 
-const SliderCodePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/slider/code/SliderCodePage.tsx" />
-    </DxcFlex>
-  );
-};
+const SliderCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/slider/code/SliderCodePage.tsx" />
+  </DxcFlex>
+);
 
 export default SliderCodePage;
diff --git a/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
new file mode 100644
index 0000000000..bda7ebc751
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
@@ -0,0 +1,232 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcInset } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import continuous from "./examples/continuous";
+import discrete from "./examples/discrete";
+import input from "./examples/input";
+import Image from "@/common/Image";
+import anatomy from "./images/slider_anatomy.png";
+
+const sections = [
+  {
+    title: "Introduction",
+    content: (
+      <DxcParagraph>
+        The <strong>slider</strong> component enhance user experience by providing a quick and intuitive way to adjust
+        settings. It is particularly useful for adjusting parameters within a continuous or discrete scale, making it
+        easier to explore multiple options efficiently
+      </DxcParagraph>
+    ),
+  },
+  {
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={anatomy} alt="Slider's anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>
+            <strong>Label:</strong> describes the purpose of the slider (e.g., "Select coverage amount").
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Helper text</strong> <em>(Optional)</em>: provides additional guidance or context for the user.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Minimum value:</strong> the lowest selectable value (e.g., 0).
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Track (bar):</strong> the line along which the thumb moves, visually representing the range.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Maximum value:</strong> the highest selectable value (e.g., 100).
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Input field</strong> <em>(Optional)</em>: displays the selected value, allowing manual input.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Tick marks</strong> <em>(Optional)</em>: small indicators on the track that represent key
+            increments.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Thumb:</strong> the draggable element that allows users to adjust the value.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Selected value indicator:</strong> highlights the current value along the track.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Key interactions and features",
+    content: (
+      <>
+        <DxcParagraph>
+          Sliders provide an intuitive way for users to <strong>adjust values dynamically</strong> by interacting with a
+          draggable thumb. Depending on the implementation, sliders can offer various interaction methods and features
+          to enhance usability.
+        </DxcParagraph>
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>
+            <strong>Dragging the thumb</strong>
+            <DxcInset top="0.5rem" bottom="0.5rem">
+              <DxcBulletedList>
+                <DxcBulletedList.Item>
+                  Users can <strong>click and drag</strong> the thumb along the track to adjust the value.
+                </DxcBulletedList.Item>
+                <DxcBulletedList.Item>
+                  In <strong>discrete sliders</strong>, the thumb snaps to predefined increments.
+                </DxcBulletedList.Item>
+                <DxcBulletedList.Item>
+                  In <strong>continuous sliders</strong>, the thumb moves smoothly without fixed steps.
+                </DxcBulletedList.Item>
+              </DxcBulletedList>
+            </DxcInset>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Clicking the track</strong>
+            <DxcInset top="0.5rem" bottom="0.5rem">
+              <DxcBulletedList>
+                <DxcBulletedList.Item>
+                  Users can <strong>click</strong> anywhere on the track to move the thumb directly to that position.
+                </DxcBulletedList.Item>
+                <DxcBulletedList.Item>
+                  In some implementations, clicking moves the thumb instantly, while in others, it may{" "}
+                  <strong>animate toward the new position</strong>.
+                </DxcBulletedList.Item>
+              </DxcBulletedList>
+            </DxcInset>
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Keyboard support</strong>
+            <DxcInset top="0.5rem" bottom="0.5rem">
+              <DxcBulletedList>
+                <DxcBulletedList.Item>
+                  Users can adjust the slider using the arrow keys for precise control:
+                  <DxcInset top="0.25rem" bottom="0.25rem">
+                    <DxcBulletedList type="circle">
+                      <DxcBulletedList.Item>
+                        <strong>Left / Down arrow:</strong> decrease value.
+                      </DxcBulletedList.Item>
+                      <DxcBulletedList.Item>
+                        <strong>Right / Up arrow:</strong> increase value.
+                      </DxcBulletedList.Item>
+                    </DxcBulletedList>
+                  </DxcInset>
+                </DxcBulletedList.Item>
+              </DxcBulletedList>
+            </DxcInset>
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Variants",
+    content: (
+      <>
+        <DxcParagraph>
+          Sliders come in two variants: <strong>discrete</strong> and <strong>continuous</strong>. Choosing the right
+          variant depends on whether precise steps or smooth adjustments are needed.
+        </DxcParagraph>
+      </>
+    ),
+    subSections: [
+      {
+        title: "Discrete slider",
+        content: (
+          <>
+            <DxcParagraph>
+              Allows users to <strong>select only predefined values</strong> along the track.
+            </DxcParagraph>
+            <DxcBulletedList>
+              <DxcBulletedList.Item>Each step is marked, and the thumb "snaps" to these values.</DxcBulletedList.Item>
+              <DxcBulletedList.Item>
+                Best for <strong>limited, meaningful choices</strong> where precision matters.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
+            <Example example={discrete} />
+          </>
+        ),
+      },
+      {
+        title: "Continuous slider",
+        content: (
+          <>
+            <DxcParagraph>
+              Lets users <strong>select any value</strong> within the range, without fixed steps.
+            </DxcParagraph>
+            <DxcBulletedList>
+              <DxcBulletedList.Item>Each step is marked, and the thumb "snaps" to these values.</DxcBulletedList.Item>
+              <DxcBulletedList.Item>
+                Best for <strong>limited, meaningful choices</strong> where precision matters.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
+            <Example example={continuous} />
+          </>
+        ),
+      },
+    ],
+  },
+  {
+    title: "Best practices",
+    subSections: [
+      {
+        title: "Provide a clear label and context",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Use a <strong>descriptive label</strong> that explains what the slider controls (i.d., instead of "Adjust
+              value," use "Select your coverage amount.").
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Add <strong>helper text</strong> if additional guidance is needed.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Set logical minimum and maximum values",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Ensure the range <strong>matches real-world expectations</strong> (e.g., an insurance deductible slider
+              should not start at $0 if the lowest option is $250).
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Keep <strong>increment steps meaningful</strong> (e.g., increments of $10 instead of $1 for large ranges).
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Allow manual input when precise values are needed",
+        content: (
+          <>
+            <DxcBulletedList>
+              <DxcBulletedList.Item>
+                Some users prefer entering a value directly instead of using the slider.
+              </DxcBulletedList.Item>
+              <DxcBulletedList.Item>
+                Providing the <strong>input field next to the slider</strong> helps with this.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
+            <Example example={input} />
+          </>
+        ),
+      },
+    ],
+  },
+];
+
+const SliderOverviewPage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx" />
+  </DxcFlex>
+);
+
+export default SliderOverviewPage;
diff --git a/apps/website/screens/components/slider/overview/examples/continuous.ts b/apps/website/screens/components/slider/overview/examples/continuous.ts
new file mode 100644
index 0000000000..e60f8f6baf
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/examples/continuous.ts
@@ -0,0 +1,34 @@
+import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+  const [value, changeValue] = useState(45);
+  const onChange = (newValue) => {
+    changeValue(newValue);
+  };
+
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex direction="column" gap="0.5rem">
+        <DxcSlider
+          label="Continuous"
+          maxValue={100}
+          minValue={0}
+          onChange={onChange}
+          showLimitsValues
+          value={value}
+        />
+        <span>Current value: {value}</span>
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcSlider,
+  DxcInset,
+  DxcFlex,
+  useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/overview/examples/discrete.ts b/apps/website/screens/components/slider/overview/examples/discrete.ts
new file mode 100644
index 0000000000..847775ade4
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/examples/discrete.ts
@@ -0,0 +1,33 @@
+import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+  const [value, changeValue] = useState(40);
+  const onChange = (newValue) => {
+    changeValue(newValue);
+  };
+
+  return (
+    <DxcInset space="2rem">
+      <DxcSlider
+        label="Discrete"
+        marks
+        maxValue={100}
+        minValue={0}
+        onChange={onChange}
+        showLimitsValues
+        step={10}
+        value={value}
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcSlider,
+  DxcInset,
+  DxcFlex,
+  useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/usage/examples/input.ts b/apps/website/screens/components/slider/overview/examples/input.ts
similarity index 100%
rename from apps/website/screens/components/slider/usage/examples/input.ts
rename to apps/website/screens/components/slider/overview/examples/input.ts
diff --git a/apps/website/screens/components/slider/overview/images/slider_anatomy.png b/apps/website/screens/components/slider/overview/images/slider_anatomy.png
new file mode 100644
index 0000000000000000000000000000000000000000..20c0f108d665376a82935dfe87798688011127e3
GIT binary patch
literal 38164
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

literal 0
HcmV?d00001

diff --git a/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx b/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx
deleted file mode 100644
index 7373da6b41..0000000000
--- a/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx
+++ /dev/null
@@ -1,773 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import sliderAnatomy from "./images/slider_anatomy.png";
-import sliderSpecs from "./images/slider_specs.png";
-import sliderStates from "./images/slider_states.png";
-
-const sections = [
-  {
-    title: "Specifications",
-    content: (
-      <Figure caption="Slider design specifications">
-        <Image alt="Slider design specifications" src={sliderSpecs} />
-      </Figure>
-    ),
-  },
-  {
-    title: "States",
-    content: (
-      <>
-        <DxcParagraph>
-          The slider component has the following states: <strong>enabled</strong>, <strong>hover</strong>,{" "}
-          <strong>focus</strong>, <strong>active</strong> and <strong>disabled</strong>.
-        </DxcParagraph>
-        <Figure caption="Slider states">
-          <Image src={sliderStates} alt="Slider states" />
-        </Figure>
-      </>
-    ),
-  },
-
-  {
-    title: "Anatomy",
-    content: (
-      <>
-        <Image src={sliderAnatomy} alt="Slider anatomy" />
-        <DxcBulletedList type="number">
-          <DxcBulletedList.Item>Label</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Helper text</DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            Floor label <em>(Optional)</em>
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>Total line</DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            Ceil label <em>(Optional)</em>
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            Value input <em>(Optional)</em>
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>Tick</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Thumb</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Track line</DxcBulletedList.Item>
-        </DxcBulletedList>
-      </>
-    ),
-  },
-  {
-    title: "Design tokens",
-    subSections: [
-      {
-        title: "Color",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Component token</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>labelFontColor</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>color-black</Code>
-                </td>
-                <td>#000000</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledLabelFontColor</Code>
-                </td>
-                <td>Label:disabled</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>helperTextFontColor</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>color-black</Code>
-                </td>
-                <td>#000000</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledhelperTextFontColor</Code>
-                </td>
-                <td>Helper text:disabled</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>thumbBackgroundColor</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>color-blue-800</Code>
-                </td>
-                <td>#0067b3</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>hoverThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:hover</td>
-                <td>
-                  <Code>color-blue-900</Code>
-                </td>
-                <td>#003c66</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>focusThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:focus</td>
-                <td>
-                  <Code>color-blue-600</Code>
-                </td>
-                <td>#0095ff</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>activeThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:active</td>
-                <td>
-                  <Code>color-blue-900</Code>
-                </td>
-                <td>#003c66</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledThumbBackgroundColor</Code>
-                </td>
-                <td>Thumb:disabled</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>tickBackgroundColor</Code>
-                </td>
-                <td>Tick</td>
-                <td>
-                  <Code>color-blue-800</Code>
-                </td>
-                <td>#0067b3</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledTickBackgroundColor</Code>
-                </td>
-                <td>Tick:disabled</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>trackLineColor</Code>
-                </td>
-                <td>Track line</td>
-                <td>
-                  <Code>color-blue-800</Code>
-                </td>
-                <td>#0067b3</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledTrackLineColor</Code>
-                </td>
-                <td>Track line:disabled</td>
-                <td>
-                  <Code>color-blue-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>totalLineColor</Code>
-                </td>
-                <td>Total line</td>
-                <td>
-                  <Code>color-grey-200</Code>
-                </td>
-                <td>#e6e6e6</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledTotalLineColor</Code>
-                </td>
-                <td>Total line:disabled</td>
-                <td>
-                  <Code>color-grey-100</Code>
-                </td>
-                <td>#f2f2f2</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>limitValuesFontColor</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>color-black</Code>
-                </td>
-                <td>#000000</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>disabledLimitValuesFontColor</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>color-grey-500</Code>
-                </td>
-                <td>#999999</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>focusColor</Code>
-                </td>
-                <td>Focus indicator</td>
-                <td>
-                  <Code>color-blue-600</Code>
-                </td>
-                <td>#0095ff</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Typography",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Component token</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>fontFamily</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-family</Code>
-                </td>
-                <td>&#39;Open Sans&#39;, sans-serif</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontSize</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-scale-02</Code>
-                </td>
-                <td>0.875rem / 14px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontStyle</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-style-normal</Code>
-                </td>
-                <td>normal</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontWeight</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-weight-semibold</Code>
-                </td>
-                <td>600</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>lineHeight</Code>
-                </td>
-                <td>Label</td>
-                <td>
-                  <Code>font-leading-loose-01</Code>
-                </td>
-                <td>1.715em</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontFamily</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>font-family</Code>
-                </td>
-                <td>&#39;Open Sans&#39;, sans-serif</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontSize</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>font-scale-01</Code>
-                </td>
-                <td>0.75rem / 12px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontStyle</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>font-style-normal</Code>
-                </td>
-                <td>normal</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontWeight</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>font-weight-regular</Code>
-                </td>
-                <td>400</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>lineHeight</Code>
-                </td>
-                <td>Helper text</td>
-                <td>
-                  <Code>font-leading-normal</Code>
-                </td>
-                <td>1.5em</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>limitValuesFontFamily</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>font-family</Code>
-                </td>
-                <td>&#39;Open Sans&#39;, sans-serif</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>limitValuesFontSize</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>font-scale-03</Code>
-                </td>
-                <td>1rem / 16px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>limitValuesFontStyle</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>font-style-normal</Code>
-                </td>
-                <td>normal</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>limitValuesFontWeight</Code>
-                </td>
-                <td>Ceil/Floor label</td>
-                <td>
-                  <Code>font-weight-regular</Code>
-                </td>
-                <td>400</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontFamily</Code>
-                </td>
-                <td>Floor/Ceil label</td>
-                <td>
-                  <Code>font-family-sans</Code>
-                </td>
-                <td>&#39;Open Sans&#39;, sans-serif</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontSize</Code>
-                </td>
-                <td>Floor/Ceil label</td>
-                <td>
-                  <Code>font-scale-03</Code>
-                </td>
-                <td>1rem / 16px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontWeight</Code>
-                </td>
-                <td>Floor/Ceil label</td>
-                <td>
-                  <Code>font-weight-regular</Code>
-                </td>
-                <td>400</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>fontStyle</Code>
-                </td>
-                <td>Floor/Ceil label</td>
-                <td>
-                  <Code>font-style-normal</Code>
-                </td>
-                <td>normal</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Spacing",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Property</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>margin-left</Code>
-                </td>
-                <td>Floor label</td>
-                <td>
-                  <Code>spacing-16</Code>
-                </td>
-                <td>1rem / 16px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>margin-right</Code>
-                </td>
-                <td>Ceil label</td>
-                <td>
-                  <Code>spacing-16</Code>
-                </td>
-                <td>1rem / 16px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>margin-left</Code>
-                </td>
-                <td>Input</td>
-                <td>
-                  <Code>spacing-32</Code>
-                </td>
-                <td>2rem / 32px</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-      {
-        title: "Size",
-        content: (
-          <>
-            <DxcTable>
-              <thead>
-                <tr>
-                  <th>Property</th>
-                  <th>Element</th>
-                  <th>Core token</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <Code>height</Code>
-                  </td>
-                  <td>Total line</td>
-                  <td>-</td>
-                  <td>2px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>height</Code>
-                  </td>
-                  <td>Track line</td>
-                  <td>-</td>
-                  <td>2px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>height</Code>
-                  </td>
-                  <td>Thumb</td>
-                  <td>-</td>
-                  <td>12px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>width</Code>
-                  </td>
-                  <td>Thumb</td>
-                  <td>-</td>
-                  <td>12px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>height</Code>
-                  </td>
-                  <td>Thumb:hover*</td>
-                  <td>-</td>
-                  <td>14px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>width</Code>
-                  </td>
-                  <td>Thumb:hover</td>
-                  <td>-</td>
-                  <td>14px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>height</Code>
-                  </td>
-                  <td>Tick</td>
-                  <td>-</td>
-                  <td>4px</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>width</Code>
-                  </td>
-                  <td>Tick</td>
-                  <td>-</td>
-                  <td>4px</td>
-                </tr>
-              </tbody>
-            </DxcTable>
-            <DxcParagraph>
-              [*] The thumb element size is 14x14px in the following states: <Code>:hover</Code> and{" "}
-              <Code>:active</Code>.
-            </DxcParagraph>
-          </>
-        ),
-      },
-      {
-        title: "Border",
-        content: (
-          <DxcTable>
-            <thead>
-              <tr>
-                <th>Property</th>
-                <th>Element</th>
-                <th>Core token</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <Code>border-width</Code>
-                </td>
-                <td>Track line</td>
-                <td>
-                  <Code>border-width-0</Code>
-                </td>
-                <td>0rem / 0px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-style</Code>
-                </td>
-                <td>Track line</td>
-                <td>
-                  <Code>border-style-none</Code>
-                </td>
-                <td>none</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-radius</Code>
-                </td>
-                <td>Track line</td>
-                <td>
-                  <Code>border-radius-full</Code>
-                </td>
-                <td>9999px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-width</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-width-0</Code>
-                </td>
-                <td>0rem / 0px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-style</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-style-none</Code>
-                </td>
-                <td>none</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>border-radius</Code>
-                </td>
-                <td>Thumb</td>
-                <td>
-                  <Code>border-radius-full</Code>
-                </td>
-                <td>9999px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>outline</Code>
-                </td>
-                <td>Focus indicator</td>
-                <td>-</td>
-                <td>auto 1px</td>
-              </tr>
-              <tr>
-                <td>
-                  <Code>outline-offset</Code>
-                </td>
-                <td>Focus indicator</td>
-                <td>-</td>
-                <td>2px</td>
-              </tr>
-            </tbody>
-          </DxcTable>
-        ),
-      },
-    ],
-  },
-  {
-    title: "Accessibility",
-    subSections: [
-      {
-        title: "WCAG",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships">
-                SC 1.3.1 Info and Relationships
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence">
-                SC 1.3.2 Meaningful Sequence
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/keyboard">
-                SC 2.1.1 Keyboard
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/focus-order">
-                SC 2.4.3 Focus Order
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels">
-                SC 2.4.6 Headings and Labels
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible">
-                SC 2.4.7 Focus Visible
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              Understanding WCAG 2.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/WAI/WCAG22/Understanding/name-role-value">
-                SC 4.1.2 Name, Role, Value
-              </DxcLink>
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-      {
-        title: "WAI-ARIA",
-        content: (
-          <DxcBulletedList>
-            <DxcBulletedList.Item>
-              WAI-ARIA Authoring practices 1.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/TR/wai-aria-practices-1.2/#slider">
-                3.19 Slider
-              </DxcLink>
-            </DxcBulletedList.Item>
-            <DxcBulletedList.Item>
-              WAI-ARIA Authoring practices 1.2 -{" "}
-              <DxcLink newWindow href="https://www.w3.org/TR/wai-aria-practices-1.2/examples/slider/slider-1.html">
-                Slider example
-              </DxcLink>
-            </DxcBulletedList.Item>
-          </DxcBulletedList>
-        ),
-      },
-    ],
-  },
-];
-
-const SliderSpecsPage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx" />
-    </DxcFlex>
-  );
-};
-
-export default SliderSpecsPage;
diff --git a/apps/website/screens/components/slider/specs/images/slider_anatomy.png b/apps/website/screens/components/slider/specs/images/slider_anatomy.png
deleted file mode 100644
index 2ee6da6b2dd6d943d4d62177100ac191f2b8dd44..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15913
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
TJ;??EKew-IU(30A|LOk%8u_-Q

diff --git a/apps/website/screens/components/slider/specs/images/slider_specs.png b/apps/website/screens/components/slider/specs/images/slider_specs.png
deleted file mode 100644
index 623d22ea382255eb769d556c4adcae486eb65974..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 20738
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
LeNy(wH2D7m>EM$g

diff --git a/apps/website/screens/components/slider/specs/images/slider_states.png b/apps/website/screens/components/slider/specs/images/slider_states.png
deleted file mode 100644
index 44acbbeb55cd3f90151a0e081eeb1907ae915989..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 22824
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

diff --git a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx b/apps/website/screens/components/slider/usage/SliderUsagePage.tsx
deleted file mode 100644
index c1892a668a..0000000000
--- a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import variants from "./examples/variants";
-import input from "./examples/input";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
-  {
-    title: "Usage",
-    content: (
-      <DxcBulletedList>
-        <DxcBulletedList.Item>
-          Visualize the output of the slider as feedback to the user of the current state.
-        </DxcBulletedList.Item>
-        <DxcBulletedList.Item>
-          As more information can give it to the user, the easier the selection will be.
-        </DxcBulletedList.Item>
-        <DxcBulletedList.Item>
-          If the value has to be specific, give some resource to the user to fill a precise input, i.e. an input next to
-          the slider.
-        </DxcBulletedList.Item>
-      </DxcBulletedList>
-    ),
-  },
-  {
-    title: "Variants",
-    content: (
-      <>
-        <DxcParagraph>
-          The slider component has two variants that can be used depending on the requirements of the application.
-        </DxcParagraph>
-        <Example example={variants} />
-        <DxcTable>
-          <thead>
-            <tr>
-              <th>Variant</th>
-              <HeaderDescriptionCell>Description</HeaderDescriptionCell>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <strong>Discrete</strong>
-              </td>
-              <td>Slider can only get the value marked alongside the total line.</td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Continuos</strong>
-              </td>
-              <td>Slider can take every value mapped.</td>
-            </tr>
-          </tbody>
-        </DxcTable>
-      </>
-    ),
-  },
-  {
-    title: "Slider with input",
-    content: (
-      <>
-        <DxcParagraph>
-          To accomplish these considerations, some slider&#39;s variations were designed with the purpose of offering a
-          great user experience within the application.
-        </DxcParagraph>
-        <Example example={input} />
-      </>
-    ),
-  },
-];
-
-const SliderUsagePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/slider/usage/SliderUsagePage.tsx" />
-    </DxcFlex>
-  );
-};
-
-export default SliderUsagePage;
diff --git a/apps/website/screens/components/slider/usage/examples/variants.ts b/apps/website/screens/components/slider/usage/examples/variants.ts
deleted file mode 100644
index e981472c41..0000000000
--- a/apps/website/screens/components/slider/usage/examples/variants.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
-  const [discreteValue, changeDiscreteValue] = useState(40);
-  const onChangeDiscrete = (newValue) => {
-    changeDiscreteValue(newValue);
-  };
-  const [continuousValue, changeContinuousValue] = useState(45);
-  const onChangeContinuous = (newValue) => {
-    changeContinuousValue(newValue);
-  };
-
-  return (
-    <DxcInset space="2rem">
-      <DxcFlex direction="column" gap="4rem">
-        <DxcSlider
-          label="Discrete"
-          minValue={0}
-          maxValue={100}
-          showLimitsValues={true}
-          value={discreteValue}
-          step={10}
-          marks={true}
-          onChange={onChangeDiscrete}
-        />
-        <DxcSlider
-          label="Continuous"
-          minValue={0}
-          maxValue={100}
-          showLimitsValues={true}
-          value={continuousValue}
-          onChange={onChangeContinuous}
-        />
-      </DxcFlex>
-    </DxcInset>
-  );
-}`;
-
-const scope = {
-  DxcSlider,
-  DxcInset,
-  DxcFlex,
-  useState,
-};
-
-export default { code, scope };
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index cc4d87ac0d..34782b2e02 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -179,7 +179,7 @@ const DxcSlider = forwardRef<RefType, SliderPropsType>(
       value,
     },
     ref
-  ): JSX.Element => {
+  ) => {
     const labelId = `label-${useId()}`;
     const [innerValue, setInnerValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState((value ?? defaultValue).toString());

From 7da04d0bb039d3eb10f10802b7283c7c0185d700 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 18 Mar 2025 12:50:03 +0100
Subject: [PATCH 10/11] Contextual menu doc update

---
 .../overview/ContextualMenuOverviewPage.tsx   | 70 +++++++++----------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
index b2a4d6dc58..106f757706 100644
--- a/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
+++ b/apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
@@ -89,42 +89,40 @@ const sections = [
   {
     title: "Best practices",
     content: (
-      <>
-        <DxcBulletedList type="number">
-          <DxcBulletedList.Item>
-            <strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity
-            and intuitive navigation.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in
-            the center to prevent obstruction of main content.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
-            logical organization.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
-            counts or categories for navigable sections.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
-            maintain intuitive user interactions.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
-            excessive indentation and complexity.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability
-            and avoid visual clutter.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve
-            usability. Keep them purposeful and minimal.
-          </DxcBulletedList.Item>
-        </DxcBulletedList>
-      </>
+      <DxcBulletedList>
+        <DxcBulletedList.Item>
+          <strong>Use meaningful icons:</strong> Select icons that accurately represent menu items, ensuring clarity and
+          intuitive navigation.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Align properly:</strong> position the contextual menu to the left or right, avoiding placement in the
+          center to prevent obstruction of main content.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Enhance navigation with hierarchy:</strong> structure menu items using different levels to maintain
+          logical organization.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Use badges for status indication:</strong> incorporate a Badge component to display status updates,
+          counts or categories for navigable sections.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Default selection:</strong> when pre-selecting an option, try to limit it to the first menu item to
+          maintain intuitive user interactions.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Avoid deep hierarchies:</strong> limit navigation depth to a maximum of three levels to prevent
+          excessive indentation and complexity.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Restrict icon usage:</strong> use icons only at the first navigation level to maintain readability and
+          avoid visual clutter.
+        </DxcBulletedList.Item>
+        <DxcBulletedList.Item>
+          <strong>Don't overload with icons:</strong> too many icons can create confusion rather than improve usability.
+          Keep them purposeful and minimal.
+        </DxcBulletedList.Item>
+      </DxcBulletedList>
     ),
   },
 ];

From bb4129ca2c58a0b84208fc7c38f719c3f145eb2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 18 Mar 2025 17:24:49 +0100
Subject: [PATCH 11/11] Updates based on feedback

---
 apps/website/pages/components/slider/code.tsx             | 2 +-
 .../components/slider/overview/SliderOverviewPage.tsx     | 8 ++++----
 .../components/slider/overview/examples/discrete.ts       | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/website/pages/components/slider/code.tsx b/apps/website/pages/components/slider/code.tsx
index 3416f2d698..8f37e01dbe 100644
--- a/apps/website/pages/components/slider/code.tsx
+++ b/apps/website/pages/components/slider/code.tsx
@@ -6,7 +6,7 @@ import SliderCodePage from "screens/components/slider/code/SliderCodePage";
 const Code = () => (
   <>
     <Head>
-      <title>Slider — Halstack Design System</title>
+      <title>Slider code — Halstack Design System</title>
     </Head>
     <SliderCodePage />
   </>
diff --git a/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
index bda7ebc751..629719ed13 100644
--- a/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
+++ b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
@@ -158,9 +158,9 @@ const sections = [
               Lets users <strong>select any value</strong> within the range, without fixed steps.
             </DxcParagraph>
             <DxcBulletedList>
-              <DxcBulletedList.Item>Each step is marked, and the thumb "snaps" to these values.</DxcBulletedList.Item>
+              <DxcBulletedList.Item>Offers smooth, fine-grained control over the selection.</DxcBulletedList.Item>
               <DxcBulletedList.Item>
-                Best for <strong>limited, meaningful choices</strong> where precision matters.
+                Best for <strong>gradual adjustments</strong> where any value is valid.
               </DxcBulletedList.Item>
             </DxcBulletedList>
             <Example example={continuous} />
@@ -177,8 +177,8 @@ const sections = [
         content: (
           <DxcBulletedList>
             <DxcBulletedList.Item>
-              Use a <strong>descriptive label</strong> that explains what the slider controls (i.d., instead of "Adjust
-              value," use "Select your coverage amount.").
+              Use a <strong>descriptive label</strong> that explains what the slider controls (i.e., instead of "Adjust
+              value", use "Select your coverage amount.").
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
               Add <strong>helper text</strong> if additional guidance is needed.
diff --git a/apps/website/screens/components/slider/overview/examples/discrete.ts b/apps/website/screens/components/slider/overview/examples/discrete.ts
index 847775ade4..773290e280 100644
--- a/apps/website/screens/components/slider/overview/examples/discrete.ts
+++ b/apps/website/screens/components/slider/overview/examples/discrete.ts
@@ -19,6 +19,7 @@ const code = `() => {
         step={10}
         value={value}
       />
+      <span>Current value: {value}</span>
     </DxcInset>
   );
 }`;