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	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.