v-ctrl.c-slider(
:direction="vertical ? 'v' : 'h'",
@change="onRangeChange"
)
.c-slider(
:class="className",
:style="height ? { height: height } : null"
@mousedown="onMousedown"
)
input(
type="range",
:value="nominal",
:min="min",
:max="max",
:step="step",
:disabled="disabled"
)
.c-slider__progress(:style="progressPos")
ul.c-slider__marks
li(
v-for="mark in normalizedMarks",
:style="`${vertical ? 'bottom' : 'left'}: ${mark.p}`"
) {{mark.n}}
.c-slider__stops
span(
v-for="mark in normalizedMarks",
:style="`${vertical ? 'bottom' : 'left'}: ${mark.p}`"
)
.c-slider__thumb(
:class="{ 'c-slider__thumb--hover': !isDrag && isHover, 'c-slider__thumb--dragging': isDrag }"
:style="thumbPos",
@mouseenter="onThumbHover",
@mouseleave="onThumbHoverout"
)
.c-slider__tip(role="tooltip", aria-hidden="true")
| {{formmater(this.nominal, 'tip')}}