Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The AqSlider component is used to allow users to select a value or range within a defined numerical interval by moving a handle along a track.

Additional configuration options include disabling handles, setting initial positions, and controlling tooltip size to enhance usability and accessibility.

Select State=Default.png

<!-- Normal -->
<aq-slider
  info="This is a tooltip"
  is-required
  tooltip-width="80px"
  label="This is a disabled slider"
  class="components-slider"
  is-disabled
></aq-slider>

<!-- Multiple Handlers -->
<aq-slider
  id="slider-test"
  class="components-slider"
  handler-position="[5, 10]"
  disable-handlers="[0]"
  is-discrete
  label="This is a label"
  info="This is a label tooltip"
  is-required
></aq-slider>

Props and Attributes

Prop Type Default Description
min number 0 Minimum value the slider can select.
max number 100 Maximum value the slider can select.
step number 1 Increment or decrement applied when moving the slider handle.
handlerPosition string[] ['0'] Defines the initial position of the slider handles as percentages of the track.

Each value in the array sets the starting position of one handle. | | disabledHandlers | string[] | [] | Specifies which handles are disabled.

Each value in the array refers to the index of a handle. | | isDiscrete | boolean | false | Enables discrete mode for the slider.

When true, the handle only moves between fixed step values, and the slider is styled with discrete marks along the track | | isDisabled | boolean | false | Disables the slider, preventing any interaction. | | label | string | '' | Text label displayed alongside the slider. | | info | string | '' | Sets the tooltip text that appears while hovering the label info icon. | | tooltipWidth | string | '' | Width of the tooltip displaying the current slider value. Can include units (px, %, etc.).

Leave empty for automatic sizing. | | isRequired | boolean | false | Indicates whether the slider is a required field in a form. |

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqslider--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event Description React Angular Vue Vanilla JS
change Triggered whenever the slider handler position changes. onChange={handleChange} (change)="handleChange($event)" @change="handleChange" addEventListener('change', handler)

Event Types

Event React Angular Vue
change (*e*: React.ChangeEvent<HTMLAqSliderElement> & { nativeEvent: CustomEvent<{ value: number[] }> }) (e:Event) (e:CustomEvent)

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<!-- Normal -->
<aq-slider
  info="This is a tooltip"
  is-required
  tooltip-width="80px"
  label="This is a disabled slider"
  class="components-slider"
  is-disabled
></aq-slider>

<!-- Multiple Handlers -->
<aq-slider
  id="slider-test"
  class="components-slider"
  handler-position="[5, 10]"
  disable-handlers="[0]"
  is-discrete
  label="This is a label"
  info="This is a label tooltip"
  is-required
></aq-slider>

Vue

<script lang="ts">
import { AqSlider } from '@aqua-ds/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    AqSlider,
  },
  setup() {
    const handleChange = (e: CustomEvent) => {
      console.log('Handling slider change from vue ', e.detail);
    };
    return {
      handleChange,
    };
  },
});
</script>
<template>
  <div>
    <!-- Normal -->
    <aq-slider
      @change="handleChange"
      class="components-slider"
      is-disabled
    ></aq-slider>

    <!-- Multiple Handlers -->
    <aq-slider
      @change="handleChange"
      id="slider-test"
      class="components-slider"
      handler-position="[5, 10]"
      disable-handlers="[0]"
      is-discrete
      label="This is a label"
      info="This is a label tooltip"
      is-required
    ></aq-slider>
  </div>
</template>

React

import { AqSlider } from '@aqua-ds/react';
import { SyntheticEvent } from 'react';

export const SliderSet = () => {
  return (
    <>
	    {/* Normal */}
      <AqSlider
        onChange={handleValueChange}
        className="components-slider"
        isDisabled
      ></AqSlider>
    
	    {/* Multiple Handlers */}
      <AqSlider
        onChange={handleValueChange}
        className="components-slider"
        handlerPosition={[5, 10]}
        disableHandlers={[0]}
        isDiscrete
        label="This is a label"
        info="This is a label tooltip"
        isRequired
      ></AqSlider>
    </>
  );
};

Angular

// slider-set.component.ts
import { Component } from '@angular/core';
import { AqSlider } from '@aqua-ds/angular';

@Component({
  selector: 'app-set-slider',
  standalone: true,
  imports: [
    AqSlider
  ],
  templateUrl: './slider-set.component.html',
})
export class SetSliderComponent {
  handleChange = () => {
    console.log('Handling slider custom aqchange from Angular ');
  };
}

<!-- slider-set.component.html -->
<!-- Normal -->
<aq-slider
  (change)="handleChange()"
  class="components-slider"
  is-disabled
></aq-slider>

<!-- Multiple Handlers -->
<aq-slider
  (change)="handleChange()"
  id="slider-test"
  class="components-slider"
  handler-position="[5, 10]"
  disable-handlers="[0]"
  is-discrete
  label="This is a label"
  info="This is a label tooltip"
  is-required
></aq-slider>

Special Notes

Multiple Handlers and Disabling

The AqSlider supports multiple handles, allowing users to set and adjust more than one value within the same track (e.g., defining a range). Each handle represents a point that can be moved to modify the slider's values.

Specific handles can be disabled using the disabledHandlers prop by passing their indexes in an array, preventing interaction with them while keeping other handles active.

This allows for flexible configurations, such as locking certain values or creating fixed boundaries while still enabling adjustments on the remaining handles.

<!-- Multiple -->
<aq-slider
  step="3"
  handler-position="[5, 20, 35, 50]"
  is-discrete
  label="This is a label"
  info="This is a label tooltip"
  is-required
></aq-slider>

<!-- Disabled -->
<aq-slider
  step="3"
  handler-position="[5, 20, 35, 50]"
  disabled-handlers="[0]"
  label="This is a label"
  is-discrete
  is-required
  info="This is a label tooltip"
></aq-slider>