Fix review comments added single slider

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

docs-ui/src/app/components/slider/components.tsx

@@ -1,81 +1,85 @@
 'use client';
 
-import { RangeSlider } from '../../../../../packages/ui/src/components/RangeSlider/RangeSlider';
+import { Slider } from '../../../../../packages/ui/src/components/Slider';
+
+export const SingleValue = () => {
+  return (
+    <Slider label="Volume" minValue={0} maxValue={100} defaultValue={50} />
+  );
+};
 
 export const Default = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Price Range"
       minValue={0}
       maxValue={1000}
       defaultValue={[200, 800]}
-      showValueLabel
     />
   );
 };
 
 export const WithCustomRange = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Temperature (°C)"
       minValue={-20}
       maxValue={40}
       defaultValue={[0, 20]}
       step={5}
-      showValueLabel
     />
   );
 };
 
 export const WithFormattedValues = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Budget"
       minValue={0}
       maxValue={10000}
       defaultValue={[2000, 8000]}
       step={100}
-      showValueLabel
-      formatValue={(value: number) => `$${value.toLocaleString()}`}
+      formatOptions={{
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+      }}
     />
   );
 };
 
 export const WithDescription = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Age Range"
       description="Select the age range for your target audience"
       minValue={0}
       maxValue={100}
       defaultValue={[18, 65]}
-      showValueLabel
     />
   );
 };
 
 export const Required = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Score Range"
       minValue={0}
       maxValue={100}
       defaultValue={[20, 80]}
       isRequired
-      showValueLabel
     />
   );
 };
 
 export const Disabled = () => {
   return (
-    <RangeSlider
+    <Slider
       label="Disabled Range"
       minValue={0}
       maxValue={100}
       defaultValue={[30, 70]}
       isDisabled
-      showValueLabel
     />
   );
 };

docs-ui/src/app/components/slider/page.mdx

@@ -2,9 +2,10 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import { ReactAriaLink } from '@/components/ReactAriaLink';
-import { rangeSliderPropDefs } from './props-definition';
+import { sliderPropDefs } from './props-definition';
 import {
   snippetUsage,
+  singleValueSnippet,
   defaultSnippet,
   withCustomRangeSnippet,
   withFormattedValuesSnippet,
@@ -13,6 +14,7 @@ import {
   disabledSnippet,
 } from './snippets';
 import {
+  SingleValue,
   Default,
   WithCustomRange,
   WithFormattedValues,
@@ -23,15 +25,15 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { RangeSliderDefinition } from '../../../utils/definitions';
+import { SliderDefinition } from '../../../utils/definitions';
 
 export const reactAriaUrls = {
   slider: 'https://react-spectrum.adobe.com/react-aria/Slider.html',
 };
 
 <PageTitle
-  title="RangeSlider"
-  description="A dual-thumb slider for selecting a numeric range with customizable formatting and validation."
+  title="Slider"
+  description="A slider for selecting numeric values, supporting both single values and ranges with customizable formatting and validation."
 />
 
 <Snippet align="center" py={4} preview={<Default />} code={defaultSnippet} />
@@ -42,12 +44,23 @@ export const reactAriaUrls = {
 
 ## API reference
 
-<PropsTable data={rangeSliderPropDefs} />
+<PropsTable data={sliderPropDefs} />
 
 <ReactAriaLink component="Slider" href={reactAriaUrls.slider} />
 
 ## Examples
 
+### Single value
+
+Use a single number as the default value to create a single-thumb slider.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<SingleValue />}
+  code={singleValueSnippet}
+/>
+
 ### Custom range
 
 Define custom minimum, maximum, and step values for specific use cases.
@@ -61,7 +74,7 @@ Define custom minimum, maximum, and step values for specific use cases.
 
 ### Formatted values
 
-Use the `formatValue` prop to customize how values are displayed.
+Use the `formatOptions` prop with standard Intl.NumberFormat options to customize how values are displayed.
 
 <Snippet
   align="center"
@@ -91,6 +104,6 @@ Mark a field as required to show a "Required" indicator in the label.
 
 <Snippet align="center" py={4} preview={<Disabled />} code={disabledSnippet} />
 
-<Theming definition={RangeSliderDefinition} />
+<Theming definition={SliderDefinition} />
 
-<ChangelogComponent component="range-slider" />
+<ChangelogComponent component="slider" />

docs-ui/src/app/components/slider/props-definition.ts

@@ -1,10 +1,10 @@
 import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
 import type { PropDef } from '@/utils/propDefs';
 
-export const rangeSliderPropDefs: Record<string, PropDef> = {
+export const sliderPropDefs: Record<string, PropDef> = {
   label: {
     type: 'string',
-    description: 'The label text for the range slider.',
+    description: 'The label text for the slider.',
   },
   description: {
     type: 'string',
@@ -22,12 +22,12 @@ export const rangeSliderPropDefs: Record<string, PropDef> = {
   },
   minValue: {
     type: 'number',
-    description: 'The minimum value of the slider range.',
+    description: 'The minimum value of the slider.',
     default: '0',
   },
   maxValue: {
     type: 'number',
-    description: 'The maximum value of the slider range.',
+    description: 'The maximum value of the slider.',
     default: '100',
   },
   step: {
@@ -37,38 +37,32 @@ export const rangeSliderPropDefs: Record<string, PropDef> = {
   },
   value: {
     type: 'enum',
-    values: ['[number, number]'],
+    values: ['number', '[number, number]'],
     description:
-      'Controlled value as an array [min, max]. Use with onChange for controlled behavior.',
+      'Controlled value. Use a single number for a single-thumb slider, or an array [min, max] for a range slider. Use with onChange for controlled behavior.',
   },
   defaultValue: {
     type: 'enum',
-    values: ['[number, number]'],
-    description: 'Initial value as an array [min, max] for uncontrolled usage.',
-    default: '[minValue, maxValue]',
+    values: ['number', '[number, number]'],
+    description:
+      'Initial value for uncontrolled usage. Use a single number for a single-thumb slider, or an array [min, max] for a range slider.',
+    default: 'minValue or [minValue, maxValue]',
   },
   onChange: {
     type: 'enum',
-    values: ['(value: [number, number]) => void'],
-    description: 'Called when the slider range changes.',
+    values: ['(value: number | [number, number]) => void'],
+    description: 'Called when the slider value changes.',
   },
   onChangeEnd: {
     type: 'enum',
-    values: ['(value: [number, number]) => void'],
+    values: ['(value: number | [number, number]) => void'],
     description:
       'Called when the user stops dragging, useful for triggering actions only on final values.',
   },
-  showValueLabel: {
-    type: 'boolean',
+  formatOptions: {
+    type: 'object',
     description:
-      'Whether to display the current range values above the slider.',
-    default: 'false',
-  },
-  formatValue: {
-    type: 'enum',
-    values: ['(value: number) => string'],
-    description:
-      'Custom formatter function for displaying values (e.g., adding currency symbols).',
+      'Intl.NumberFormat options for formatting the displayed value (e.g., { style: "currency", currency: "USD" }).',
   },
   isDisabled: {
     type: 'boolean',

docs-ui/src/app/components/slider/snippets.ts

@@ -1,62 +1,67 @@
-export const snippetUsage = `import { RangeSlider } from '@backstage/ui';
+export const snippetUsage = `import { Slider } from '@backstage/ui';
 
-<RangeSlider
+<Slider
   label="My Range"
   minValue={0}
   maxValue={100}
   defaultValue={[25, 75]}
 />`;
 
-export const defaultSnippet = `<RangeSlider
+export const singleValueSnippet = `<Slider
+  label="Volume"
+  minValue={0}
+  maxValue={100}
+  defaultValue={50}
+/>`;
+
+export const defaultSnippet = `<Slider
   label="Price Range"
   minValue={0}
   maxValue={1000}
   defaultValue={[200, 800]}
-  showValueLabel
 />`;
 
-export const withCustomRangeSnippet = `<RangeSlider
+export const withCustomRangeSnippet = `<Slider
   label="Temperature (°C)"
   minValue={-20}
   maxValue={40}
   defaultValue={[0, 20]}
   step={5}
-  showValueLabel
 />`;
 
-export const withFormattedValuesSnippet = `<RangeSlider
+export const withFormattedValuesSnippet = `<Slider
   label="Budget"
   minValue={0}
   maxValue={10000}
   defaultValue={[2000, 8000]}
   step={100}
-  showValueLabel
-  formatValue={(value: number) => \`$\${value.toLocaleString()}\`}
+  formatOptions={{
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  }}
 />`;
 
-export const withDescriptionSnippet = `<RangeSlider
+export const withDescriptionSnippet = `<Slider
   label="Age Range"
   description="Select the age range for your target audience"
   minValue={0}
   maxValue={100}
   defaultValue={[18, 65]}
-  showValueLabel
 />`;
 
-export const requiredSnippet = `<RangeSlider
+export const requiredSnippet = `<Slider
   label="Score Range"
   minValue={0}
   maxValue={100}
   defaultValue={[20, 80]}
   isRequired
-  showValueLabel
 />`;
 
-export const disabledSnippet = `<RangeSlider
+export const disabledSnippet = `<Slider
   label="Disabled Range"
   minValue={0}
   maxValue={100}
   defaultValue={[30, 70]}
   isDisabled
-  showValueLabel
 />`;