Analytics & Reports
Analytics

Slider

A custom slider element. To get a basic style for the slider component, copy the CSS in the example - otherwise the slider will not be visible on render. To be visible, the gb-slider tag must be given a height, the .gb-slider__handle class must be given a height and width, and the component parts must be given background colors.

Example

// index.js
const min = 0;
const max = 200;
const onChange = function(low, high) {
  low = low;
  high = high;
}
let low = min;
let high = max;

<gb-slider on-change="{ onChange }" low="{ low }" high="{ high }"></gb-slider>
/* styles.css */
gb-slider {
  height: 18px;
  margin: 20px 5% 30px;
}

gb-slider .gb-slider__base {
  border-radius: 25px;
  background: #ccc;
}

gb-slider .gb-slider__handle {
  height: 26px;
  width: 26px;
  background: #aaa;
  border-radius: 25px;
  border: 1px solid #777;
  box-shadow: 0px 4px 11px -7px rgba(0,0,0,0.75);
}

gb-slider .gb-slider__connect {
  background: #999;
}

Properties

Property Type Default Required Description
onChange(low, high) function yes low: number - the current low value of the slider. high: number - the current high value of the slider. The function to call when slider handles move based on mouse or touch movement. On movement, the low and high values will change to the corresponding percentage value between the min and max value.
low number The lower handle’s corresponding percentage value between the min and max value.
high number The upper handle’s corresponding percentage value between the min and max value.
min number 0 The minimum value of the slider.
max number 100 The maximum value of the slider.

State

Property Type Default Description
baseLength number The width of the base element.
baseLeft number The left position of the base element.
handle HTMLElement The currently selected handle. Can be the lower or upper handle.
isLower boolean True when the currently selected handle is the lower handle, false when it is the upper handle.
limit number The left position of the not currently selected handle (ie, the limit that the currently selected handle can move to).

Events

This component does not listen for any events.