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.