Slider

A Slider is a user interface control element that allows users to select a numeric value or range from a given range.

Playground

Live Editor

<ProvenanceSlider 
  id="jsx-provenance-slider"
  value={50}
  highValue={150}
  options={{ floor: 0, ceil: 250, showTicks: true, tickStep: 25 }}
  freeze={false}
  visualize={true}
  provenanceChange={console.log} // hardcoded
  selectedChange={console.log} // hardcoded
>
</ProvenanceSlider>

Result

Loading...

info

The above example uses React JSX and Web Components. See corresponding (static) examples for Angular and Web Components below.

slider.component.ts

import { Component } from '@angular/core';
import type { SliderProvenance } from 'provenance-widgets';

@Component({
  selector: 'slider-root',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent {
  value = 50;
  highValue = 150;
  options = {
    floor: 0,
    ceil: 250,
    showTicks: true,
    tickStep: 25
  };
  freeze = false;
  visualize = true;
  provenance?: SliderProvenance = undefined;
  provenanceChange(event) {
    console.log('Provenance value: ', event.detail);
    provenance = event.detail;
  }
  selectedChange(event) {
    console.log('Selected value: ', event.detail);
  }
}

slider.component.html

<provenance-slider 
  id="angular-provenance-slider"
  [value]="value"
  [highValue]="highValue"
  [options]="options"
  [freeze]="freeze"
  [visualize]="visualize"
  (selectedChange)="selectedChange($event)"
  [provenance]="provenance" 
  (provenanceChange)="provenanceChange($event)" 
/>
<!-- two-way binding is also supported:
  [(provenance)]="provenance"
-->

slider.webcomponent.ts

import type { NgElement, WithProperties } from '@angular/elements'
import { SliderComponent } from 'provenance-widgets'

// Create a new instance of the SliderComponent
const slider = document.createElement("web-provenance-slider") as NgElement & WithProperties<SliderComponent>

// Set the properties
slider.value = 50
slider.highValue = 150
slider.options = {
  floor: 0,
  ceil: 250,
  showTicks: true,
  tickStep: 25
}
slider.freeze = false
slider.visualize = true
slider.addEventListener('selectedChange', (event) => {
  console.log('Selected value: ', event.detail)
})
slider.addEventListener('provenanceChange', (event) => {
  console.log('Provenance value: ', event.detail)
})

// Append it to the DOM
document.body.appendChild(slider)

API

info

All widgets extend a third-party library component. See the extends property below for more information about the base component's API.

Extends	ngx-slider
Angular Selector	provenance-slider
Web Component Tag	web-provenance-slider

Properties

Name	Type	Default	Required	Description
id	string	""	Yes	Unique identifier for the element. Used by ProvenanceWidgets for internal state management and visualizations.
freeze	boolean	false	No	Whether to freeze the provenance. If true, the widget will not record any provenance, and interactions will not create/update any visualizations. NOTE: The widget does not update when the property is changed.
visualize	boolean	true	No	Whether to visualize the provenance. NOTE: The widget does not update when the property is changed.
provenance	SliderProvenance	undefined	No	The provenance of interactions recorded by the widget. Use this property to persist, restore, modify, or reconstruct the provenance of interactions for the widget. To override the provenance, revalidate must be set to true. Two-way binding is supported.

warning

The widget does not update when the value or highValue properties are changed. Use the provenance property for this purpose instead.

Events

Name	EventEmitter<T>	Description
selectedChange	<ChangeContext>	Emits the updated value when the slider value changes
provenanceChange	<SliderProvenance>	Emits the provenance when the slider value changes