js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update docs, expose custom properties, rework to not use getComputedStyle

Browse Source
This commit is contained in:
Cory LaViska
2021-09-30 07:51:28 -04:00
parent a4aff0b1e9
commit f2a4db6291
4 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/range/range.styles.ts
View File

@@ -8,10 +8,10 @@ export default css`
${formControlStyles}
:host {
--indicator-color: rgb(var(--sl-color-primary-600));
--thumb-size: 20px;
--tooltip-offset-y: 10px;
--track-color: rgb(var(--sl-color-neutral-200));
--tooltip-offset: 10px;
--track-color-active: rgb(var(--sl-color-neutral-200));
--track-color-inactive: rgb(var(--sl-color-neutral-200));
--track-height: 6px;
display: block;
@@ -76,7 +76,7 @@ export default css`
}
.range__control::-moz-range-progress {
background-color: var(--indicator-color);
background-color: var(--track-color-active);
border-radius: 3px;
height: var(--track-height);
}
@@ -84,7 +84,7 @@ export default css`
.range__control::-moz-range-track {
width: 100%;
height: var(--track-height);
background-color: var(--track-color);
background-color: var(--track-color-inactive);
border-radius: 3px;
border: none;
}
@@ -168,7 +168,7 @@ export default css`
/* Tooltip on top */
.range--tooltip-top .range__tooltip {
top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
}
.range--tooltip-top .range__tooltip:after {
@@ -180,7 +180,7 @@ export default css`
/* Tooltip on bottom */
.range--tooltip-bottom .range__tooltip {
bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
}
.range--tooltip-bottom .range__tooltip:after {

18
src/components/range/range.ts
View File

@@ -25,6 +25,12 @@ let id = 0;
* @csspart base - The component's base wrapper.
* @csspart input - The native range input.
* @csspart tooltip - The range tooltip.
*
* @cssproperty --thumb-size - The size of the thumb.
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
* @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
* @cssproperty --track-color-inactive: The of the portion of the track that represents the remaining value.
* @cssproperty --track-height: The height of the track.
*/
@customElement('sl-range')
export default class SlRange extends LitElement {
@@ -162,20 +168,20 @@ export default class SlRange extends LitElement {
this.hasTooltip = false;
}
syncRange(){
syncRange() {
const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
this.syncProgress(percent);
if (this.tooltip !== 'none') {
this.syncTooltip(percent);
}
}
syncProgress(percent: number) {
const trackColor = getComputedStyle(this.input).getPropertyValue('--track-color');
const indicatorColor = getComputedStyle(this.input).getPropertyValue('--indicator-color');
this.input.style.background = `linear-gradient(to right, ${indicatorColor} 0%, ${indicatorColor} ${percent*100}%, ${trackColor} ${percent*100}%, ${trackColor} 100%)`;
this.input.style.background = `linear-gradient(to right, var(--track-color-active) 0%, var(--track-color-active) ${
percent * 100
}%, var(--track-color-inactive) ${percent * 100}%, var(--track-color-inactive) 100%)`;
}
syncTooltip(percent: number) {
@@ -183,7 +189,7 @@ export default class SlRange extends LitElement {
const tooltipWidth = this.output.offsetWidth;
const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
this.output.style.transform = `translateX(${x})`;
this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
}