# Slider Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track. It provides an intuitive, visually appealing way to adjust continuous settings or explore approximate ranges. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-slider--introduction ## Variants documented in Storybook - SingleSliders: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-slider--singlesliders - RangeSliders: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-slider--rangesliders ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Slider. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Slider

Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track. It provides an intuitive, visually appealing way to adjust continuous settings or explore approximate ranges.

Source-backed variants

  • Single sliders with value badges in small and medium sizes.
  • Single sliders with range boxes in small and medium sizes.
  • Range sliders with paired value badges in small and medium sizes.
  • Range sliders with paired range boxes in small and medium sizes.

Available stories

Introduction
Overview, live previews, and class reference for the Slider showcase.
Single Sliders
Single-value slider variants with value badge and range box treatments.
Range Sliders
Dual-thumb slider variants using badges or range boxes for min and max values.

Single Slider Showcase

Live previews taken directly from the single-slider showcase patterns in src/index.html.

Value Badge
Small
40%
info Description
Medium
40%
info Description
Range Box
Small
40
info Description
Medium
40
info Description

Range Slider Showcase

Live previews taken directly from the range-slider showcase patterns in src/index.html.

Value Badges
Small
0% 25%
info Description
Medium
0% 25%
info Description
Range Boxes
Small
0% 25%
info Description
Medium
0% 25%
info Description

CSS Class Reference

Classes used by the showcased Slider variants only.

Structure

Slider field wrapper ux4g-slider-field
Label and value row ux4g-slider-label-row
Slider container ux4g-slider
Track wrapper ux4g-slider-track
Filled track segment ux4g-slider-fill
Single-thumb marker ux4g-slider-thumb
Step marker rail ux4g-slider-steps
Help text row ux4g-slider-description
Range value row ux4g-slider-range-row

Variants

Small size ux4g-slider-sm
Medium size ux4g-slider-md
Dual-thumb range slider ux4g-slider-dual
Badge value display ux4g-slider-value-badge
Boxed value display ux4g-slider-range-box
Minimum range input ux4g-slider-input-min
Maximum range input ux4g-slider-input-max
Minimum thumb marker ux4g-slider-thumb-min
Maximum thumb marker ux4g-slider-thumb-max
``` React: ```jsx import React from 'react'; const SliderExample1Demo = () => ( <>
Components

Slider

Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track. It provides an intuitive, visually appealing way to adjust continuous settings or explore approximate ranges.

Source-backed variants

  • Single sliders with value badges in small and medium sizes.
  • Single sliders with range boxes in small and medium sizes.
  • Range sliders with paired value badges in small and medium sizes.
  • Range sliders with paired range boxes in small and medium sizes.

Available stories

Introduction
Overview, live previews, and class reference for the Slider showcase.
Single Sliders
Single-value slider variants with value badge and range box treatments.
Range Sliders
Dual-thumb slider variants using badges or range boxes for min and max values.

Single Slider Showcase

Live previews taken directly from the single-slider showcase patterns in src/index.html .

Value Badge
Small
40%
info Description
Medium
40%
info Description
Range Box
Small
40
info Description
Medium
40
info Description

Range Slider Showcase

Live previews taken directly from the range-slider showcase patterns in src/index.html .

Value Badges
Small
0% 25%
info Description
Medium
0% 25%
info Description
Range Boxes
Small
0% 25%
info Description
Medium
0% 25%
info Description

CSS Class Reference

Classes used by the showcased Slider variants only.

Structure

Slider field wrapper ux4g-slider-field
Label and value row ux4g-slider-label-row
Slider container ux4g-slider
Track wrapper ux4g-slider-track
Filled track segment ux4g-slider-fill
Single-thumb marker ux4g-slider-thumb
Step marker rail ux4g-slider-steps
Help text row ux4g-slider-description
Range value row ux4g-slider-range-row

Variants

Small size ux4g-slider-sm
Medium size ux4g-slider-md
Dual-thumb range slider ux4g-slider-dual
Badge value display ux4g-slider-value-badge
Boxed value display ux4g-slider-range-box
Minimum range input ux4g-slider-input-min
Maximum range input ux4g-slider-input-max
Minimum thumb marker ux4g-slider-thumb-min
Maximum thumb marker ux4g-slider-thumb-max
); export default SliderExample1Demo; ``` Angular: ```html
Components

Slider

Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track. It provides an intuitive, visually appealing way to adjust continuous settings or explore approximate ranges.

Source-backed variants

  • Single sliders with value badges in small and medium sizes.
  • Single sliders with range boxes in small and medium sizes.
  • Range sliders with paired value badges in small and medium sizes.
  • Range sliders with paired range boxes in small and medium sizes.

Available stories

Introduction
Overview, live previews, and class reference for the Slider showcase.
Single Sliders
Single-value slider variants with value badge and range box treatments.
Range Sliders
Dual-thumb slider variants using badges or range boxes for min and max values.

Single Slider Showcase

Live previews taken directly from the single-slider showcase patterns in src/index.html.

Value Badge
Small
40%
info Description
Medium
40%
info Description
Range Box
Small
40
info Description
Medium
40
info Description

Range Slider Showcase

Live previews taken directly from the range-slider showcase patterns in src/index.html.

Value Badges
Small
0% 25%
info Description
Medium
0% 25%
info Description
Range Boxes
Small
0% 25%
info Description
Medium
0% 25%
info Description

CSS Class Reference

Classes used by the showcased Slider variants only.

Structure

Slider field wrapper ux4g-slider-field
Label and value row ux4g-slider-label-row
Slider container ux4g-slider
Track wrapper ux4g-slider-track
Filled track segment ux4g-slider-fill
Single-thumb marker ux4g-slider-thumb
Step marker rail ux4g-slider-steps
Help text row ux4g-slider-description
Range value row ux4g-slider-range-row

Variants

Small size ux4g-slider-sm
Medium size ux4g-slider-md
Dual-thumb range slider ux4g-slider-dual
Badge value display ux4g-slider-value-badge
Boxed value display ux4g-slider-range-box
Minimum range input ux4g-slider-input-min
Maximum range input ux4g-slider-input-max
Minimum thumb marker ux4g-slider-thumb-min
Maximum thumb marker ux4g-slider-thumb-max
``` ### 2. Range Sliders — Range Slider with Value Badges HTML: ```html
0% 25%
info Description
0% 25%
info Description
``` React: ```jsx import React from 'react'; const SliderExample2Demo = () => ( <> {/* Variant: Range Slider with Value Badges - Small */}
0% 25%
info Description
{/* Variant: Range Slider with Value Badges - Medium */}
0% 25%
info Description
); export default SliderExample2Demo; ``` Angular: ```html
0% 25%
info Description
0% 25%
info Description
``` ### 3. Range Sliders — Range Slider with Range Boxes HTML: ```html
0% 25%
info Description
0% 25%
info Description
``` React: ```jsx import React from 'react'; const SliderExample3Demo = () => ( <> {/* Variant: Range Slider with Range Boxes - Small */}
0% 25%
info Description
{/* Variant: Range Slider with Range Boxes - Medium */}
0% 25%
info Description
); export default SliderExample3Demo; ``` Angular: ```html
0% 25%
info Description
0% 25%
info Description
``` ### 4. Single Sliders — Single Slider with Value Badge HTML: ```html
40%
info Description
40%
info Description
``` React: ```jsx import React from 'react'; const SliderExample4Demo = () => ( <> {/* Variant: Single Slider with Value Badge - Small */}
40%
info Description
{/* Variant: Single Slider with Value Badge - Medium */}
40%
info Description
); export default SliderExample4Demo; ``` Angular: ```html
40%
info Description
40%
info Description
``` ### 5. Single Sliders — Single Slider with Range Box HTML: ```html
40
info Description
40
info Description
``` React: ```jsx import React from 'react'; const SliderExample5Demo = () => ( <> {/* Variant: Single Slider with Range Box - Small */}
40
info Description
{/* Variant: Single Slider with Range Box - Medium */}
40
info Description
); export default SliderExample5Demo; ``` Angular: ```html
40
info Description
40
info Description
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.