Slider

Use cases:

• Interact with data visualization
• Input for numeric values
• Dynamic filters
• Have a visually labelled scale for the user to choose a value from

Example

Slider:

Simple slider

Slider with labels and step value of 1 Low Mid High

Genesis

Declaration

<rapid-slider>
  <rapid-slider-label position="0"> Low </rapid-slider-label>
  <rapid-slider-label position="50"> Mid </rapid-slider-label>
  <rapid-slider-label position="100"> High </rapid-slider-label>
</rapid-slider>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <div>
        <label>Simple slider</label>
        <rapid-slider @change="${(x, ctx) => x.handleSliderChanged(ctx.event)}" value="${sync((x) => x.sliderValue, 'number')}"></rapid-slider>
    </div>
    <div>
        <label>Slider with labels and step value of 1</label>
        <rapid-slider
          value="${sync((x) => x.sliderValue, 'number')}"
          @change="${(x, ctx) => x.handleLabelSliderChanged(ctx.event)}"
          min="0"
          max="100"
          step="1"
          value="50"
        >
          <rapid-slider-label position="0"> Low </rapid-slider-label>
          <rapid-slider-label position="50"> Mid </rapid-slider-label>
          <rapid-slider-label position="100"> High </rapid-slider-label>
        </rapid-slider>
    </div>
  `,
})
export class MyElement extends GenesisElement {
    @observable sliderValue: number;
  handleSliderChanged(event: Event): void {
      console.log((event.target as HTMLInputElement).value);
  }

  handleLabelSliderChanged(e: Event): void {
    // both sync values and event values will be the same
    console.log(this.sliderValue)
    console.log((event.target as HTMLInputElement).value);
  }
}

React

Declaration

<rapid-slider>
  <rapid-slider-label position="0"> Low </rapid-slider-label>
  <rapid-slider-label position="50"> Mid </rapid-slider-label>
  <rapid-slider-label position="100"> High </rapid-slider-label>
</rapid-slider>

Usage

export function MyComponent() {
  const [labelSliderValue, setLabelSliderValue] = useState(false);
  const handleSliderChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
    setLabelSliderValue(event.target.value);
  }
  return (
    <div>
        <label>Simple slider</label>
        <rapid-slider onChange={handleSliderChanged}></rapid-slider>
    </div>
    <div>
        <label>Slider with labels and step value of 1</label>
        <rapid-slider
            onChange={handleLabelSliderChanged}
            min="0"
            max="100"
            step="1"
            value="50"
        >
            <rapid-slider-label position="0"> Low </rapid-slider-label>
            <rapid-slider-label position="50"> Mid </rapid-slider-label>
            <rapid-slider-label position="100"> High </rapid-slider-label>
        </rapid-slider>
    </div>
  );
}

Angular

Declaration

<rapid-slider>
  <rapid-slider-label position="0"> Low </rapid-slider-label>
  <rapid-slider-label position="50"> Mid </rapid-slider-label>
  <rapid-slider-label position="100"> High </rapid-slider-label>
</rapid-slider>

Usage

  import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  @Component({
  selector: 'my-root',
      template: `
        <div>
            <label>Simple slider</label>
            <rapid-slider (change)="handleSliderChanged($event)"></rapid-slider>
        </div>
        <div>
            <label>Slider with labels and step value of 1</label>
            <rapid-slider
                    (change)="handleLabelSliderChanged($event)"
                    min="0"
                    max="100"
                    step="1"
                    value="50"
            >
                <rapid-slider-label position="0"> Low </rapid-slider-label>
                <rapid-slider-label position="50"> Mid </rapid-slider-label>
                <rapid-slider-label position="100"> High </rapid-slider-label>
            </rapid-slider>
        </div>
      `,
      standalone: true,
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
export class AppComponent {

    labelSliderValue;

    handleLabelSliderChangd(event: Event): void {
      console.log((event.target as HTMLInputElement).value);
    }

    handleSliderChanged(event: Event): void {
      console.log((event.target as HTMLInputElement).value);
      this.labelSliderValue = (event.target as HTMLInputElement).value;
    }
}

Use of the <rapid-slider-label> is optional.

API

Property and attribute binding examples for Genesis Component syntax.

Attributes

Name	Type	Description	Example
readonly	boolean	The slider is for display only, and cannot be changed by the user.	<rapid-slider readonly>
disabled	boolean	Similar to readonly, but component is also greyed out.	<rapid-slider disabled>
form	string	Associates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form.	<rapid-slider form="myForm">
max	number	Defines maximum number of the slider.	<rapid-slider max=50>
min	number	Defines minimum number of the slider.	<rapid-slider min=10>
step	number	Defines the value of each step of the slider.	<rapid-slider step=5>
value	number	Defines a value for the component when it is created. If omitted the default is halfway between the min and max values.	<rapid-slider value=20>
orientation	string	Defines the orientation: vertical or horizontal.	<rapid-slider orientation="horizontal">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Use
checked-indicator	The checked indicator.
track	The track of the slider.
track-start	The track-start visual indicator.
thumb	The slider thumb.

Parts

Part	Description
control	The element representing the visual radio control.
label	The label.
positioning-region	The region used to position the elements of the slider.
track	The region containing the track elements.
track-start	The element wrapping the track start slot.
thumb-container	The thumb container element which is programmatically positioned.
thumb	The thumb element.

Events fired

Event	Type	Use	Example
change	event	Emits a custom change event when the checked state changes. Access the value on the event via .target.value.	<rapid-slider @change="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML range slider element.