component(
ref="formEl"
:is="formRegister ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue: rangeValueScaled, disabled: isDisabled, readonly: isReadonly, noBlurValidation }"
v-model:valid="valid"
@reset="rangeValuePercent = 0;updateRangeValueScaled()"
:wrap="formRegister || null"
:class="wrapperClasses")
label.w-slider__label.w-slider__label--left.w-form-el-shakable(
v-if="$slots['label-left']"
:for="thumbId"
:class="labelClasses")
slot(name="label-left")
label.w-slider__label.w-slider__label--left.w-form-el-shakable(
v-else-if="labelLeft"
:for="thumbId"
:class="labelClasses"
v-html="labelLeft")
.w-slider__track-wrap
.w-slider__track(
ref="track"
@mousedown="onTrackMouseDown"
@touchstart="onTrackMouseDown"
:class="trackClasses"
role="slider"
aria-label="Slider"
:aria-valuemin="minVal"
:aria-valuemax="maxVal"
:aria-valuenow="rangeValueScaled"
:aria-readonly="isReadonly ? 'true' : 'false'"
aria-orientation="horizontal")
.w-slider__range(:class="rangeClasses" :style="rangeStyles")
.w-slider__thumb(:style="thumbStyles")
button.w-slider__thumb-button(
ref="thumb"
:id="thumbId"
:class="[color]"
:name="inputName"
:model-value="rangeValueScaled"
:disabled="isDisabled || null"
:readonly="isReadonly || null"
:aria-readonly="isReadonly ? 'true' : 'false'"
:tabindex="isDisabled || isReadonly ? -1 : null"
@keydown.left="onKeyDown($event, -1)"
@keydown.right="onKeyDown($event, 1)"
@focus="$emit('focus', $event)"
@click.prevent)
label.w-slider__thumb-label(
v-if="thumbLabel"
:for="thumbId"
:class="thumbClasses")
div(v-if="thumbLabel === 'droplet'")
slot(name="label" :value="rangeValueScaled") {{ ~~rangeValueScaled }}
slot(v-else name="label" :value="rangeValueScaled") {{ ~~rangeValueScaled }}
.w-slider__step-labels(v-if="stepLabels && step")
.w-slider__step-label(@click="onStepLabelClick(0)") {{ this.minVal }}
.w-slider__step-label(
v-for="currStep in ~~numberOfSteps"
:key="currStep"
@click="onStepLabelClick(currStep * (100 / numberOfSteps))"
:style="`left: ${currStep * (100 / numberOfSteps)}%`")
| {{ percentToScaled(currStep * (100 / numberOfSteps)) }}
.w-slider__step-label(
v-if="~~numberOfSteps !== numberOfSteps"
@click="onStepLabelClick(100)"
style="left: 100%") {{ this.maxVal }}
label.w-slider__label.w-slider__label--right.w-form-el-shakable(
v-if="$slots['label-right']"
:for="thumbId"
:class="labelClasses")
slot(name="label-right")
label.w-slider__label.w-slider__label--right.w-form-el-shakable(
v-else-if="labelRight"
:for="thumbId"
:class="labelClasses"
v-html="labelRight")