<template lang="pug">
.flex.items-center.gap-x-4.slider-container
  div(tabindex="-1" style="position: relative; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; outline: 0px; padding-top: 8px; padding-bottom: 8px;" class="chakra-slider css-1t1xvy7")
    div(style="position:absolute;top:50%;transform:translateY(-50%);width:100%" class="chakra-slider__track css-8v2r68")
      div(class="css-11z5obk")
      div(aria-valuenow="50" class="chakra-slider__filled-track css-19vmo6h" style="position: absolute; top: 50%; transform: translateY(-50%); width: 28.5714%; left: 0%;")
    div.absolute.select-none.touch-none(
      role="slider" tabindex="0" aria-valuemin="10" aria-valuemax="150" aria-valuenow="25" aria-orientation="horizontal"
      style="left: calc(28.5714% - 8px);"
      class="chakra-slider__thumb css-12qisgv"
    )
    input(type="hidden" value="50")
</template>

<style>
.css-1t1xvy7 {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 100%;
    --slider-thumb-size: var(--chakra-sizes-3-5);
    --slider-track-size: var(--chakra-sizes-1);
}
.css-8v2r68 {
    height: var(--slider-track-size);
    overflow: hidden;
    border-radius: var(--chakra-radii-sm);
    background: var(--chakra-colors-gray-200);
    background-color: var(--toned-out-gray);
}
.css-19vmo6h {
    width: inherit;
    height: inherit;
    background: var(--chakra-colors-blue-500);
    background-color: var(--accent-blue);
}
.css-11z5obk {
    position: relative;
    right: var(--chakra-space-10);
}
</style>