<commit_before><template>
  <div
    ref="wrap"
    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]"
    v-show="show"
    :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
    @click="wrapClick"
  >
    <div ref="elem" aria-hidden="true" class="vue-slider" :style="[elemStyles, bgStyle]">
      <template v-if="isRange">
        <div
          ref="dot0"
          key="dot0"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
              'vue-slider-dot-dragging': flag && currentSlider === 0,
              'vue-slider-dot-disabled': !boolDisabled && disabledArray[0]
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart($event, 0)"
          @touchstart="moveStart($event, 0)"
        >
          <slot name="dot" :value="val[0]" :index="0" :disabled="disabledArray[0]">
            <div
              class="vue-slider-dot-handle"
              :style="[
                (!boolDisabled && disabledArray[0])
                ? disabledDotStyles[0]
                : null,
                sliderStyles[0],
                focusFlag && focusSlider === 0 ? focusStyles[0]: null
              ]"
            ></div>
          </slot>
          <div ref="tooltip0" :class="['vue-slider-tooltip-' + tooltipDirection[0], 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val[0]" :index="0" :disabled="!boolDisabled && disabledArray[0]">
              <span class="vue-slider-tooltip"  :class="tooltipClass" :style="tooltipStyles[0]">{{ formatter ? formatting(val[0]) : val[0] }}</span>
            </slot>
          </div>
        </div>
        <div
          ref="dot1"
          key="dot1"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 1,
              'vue-slider-dot-dragging': flag && currentSlider === 1,
              'vue-slider-dot-disabled': !boolDisabled && disabledArray[1]
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart($event, 1)"
          @touchstart="moveStart($event, 1)"
        >
          <slot name="dot" :value="val[1]" :index="1" :disabled="disabledArray[1]">
            <div
              class="vue-slider-dot-handle"
              :style="[
                (!boolDisabled && disabledArray[1])
                ? disabledDotStyles[1]
                : null,
                sliderStyles[1],
                focusFlag && focusSlider === 1 ? focusStyles[1]: null
              ]"
            ></div>
          </slot>
          <div ref="tooltip1" :class="['vue-slider-tooltip-' + tooltipDirection[1], 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val[1]" :index="1" :disabled="!boolDisabled && disabledArray[1]">
              <span class="vue-slider-tooltip" :class="tooltipClass" :style="tooltipStyles[1]">{{ formatter ? formatting(val[1]) : val[1] }}</span>
            </slot>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          v-if="staticValue !== void 0"
          ref="static-dot"
          key="static-dot"
          :class="[
            'vue-slider-dot',
            'vue-slider-dot--static',
            {
              'vue-slider-dot-active': isActive(getIndexByValue(staticValue)),
            }
          ]"
          class="vue-slider-dot static-dot"
          :style="[staticPosition, dotStyles]"
          @click.stop="() => setValue(staticValue)"
        >
          <slot name="static-dot" :value="staticValue">
            <div class="vue-slider-dot-handle--static"></div>
          </slot>

          <div
            v-if="val !== staticValue"
            :class="['vue-slider-tooltip-' + tooltipDirection, 'vue-slider-tooltip-wrap']">
            <slot name="static-tooltip" :value="staticValue">
              <span class="vue-slider-tooltip" :class="tooltipClass">
                <template v-if="staticLabel">
                  {{ staticLabel }}
                </template>
                <template v-else>
                  {{ formatter ? formatting(staticValue) : staticValue }}
                </template>
              </span>
            </slot>
          </div>
        </div>
        <div
          ref="dot"
          key="dot"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
              'vue-slider-dot-dragging': flag && currentSlider === 0
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart"
          @touchstart="moveStart"
        >
          <slot name="dot" :value="val" :disabled="boolDisabled">
            <div
              class="vue-slider-dot-handle"
              :style="[
                sliderStyles,
                focusFlag && focusSlider === 0 ? focusStyles : null
              ]"
            ></div>
          </slot>
          <div :class="['vue-slider-tooltip-' + tooltipDirection, 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val">
              <span class="vue-slider-tooltip"  :class="tooltipClass" :style="tooltipStyles">{{ formatter ? formatting(val) : val }}</span>
            </slot>
          </div>
        </div>
      </template>
      <ul class="vue-slider-piecewise">
        <li
          v-for="(piecewiseObj, index) in piecewiseDotWrap"
          class="vue-slider-piecewise-item"
          :style="[piecewiseDotStyle, piecewiseObj.style]"
          :key="index"
        >
          <slot
            name="piecewise"
            :value="val"
            :label="piecewiseObj.label"
            :index="index"
            :first="index === 0"
            :last="index === piecewiseDotWrap.length - 1"
            :active="isActive(piecewiseObj.index)"
          >
            <span
              v-if="piecewise"
              class="vue-slider-piecewise-dot"
              :style="[ piecewiseStyle, isActive(piecewiseObj.index) ? piecewiseActiveStyle : null ]"
            ></span><commit_msg>Add active class on peicewise-dot<commit_after><template>
  <div
    ref="wrap"
    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]"
    v-show="show"
    :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
    @click="wrapClick"
  >
    <div ref="elem" aria-hidden="true" class="vue-slider" :style="[elemStyles, bgStyle]">
      <template v-if="isRange">
        <div
          ref="dot0"
          key="dot0"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
              'vue-slider-dot-dragging': flag && currentSlider === 0,
              'vue-slider-dot-disabled': !boolDisabled && disabledArray[0]
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart($event, 0)"
          @touchstart="moveStart($event, 0)"
        >
          <slot name="dot" :value="val[0]" :index="0" :disabled="disabledArray[0]">
            <div
              class="vue-slider-dot-handle"
              :style="[
                (!boolDisabled && disabledArray[0])
                ? disabledDotStyles[0]
                : null,
                sliderStyles[0],
                focusFlag && focusSlider === 0 ? focusStyles[0]: null
              ]"
            ></div>
          </slot>
          <div ref="tooltip0" :class="['vue-slider-tooltip-' + tooltipDirection[0], 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val[0]" :index="0" :disabled="!boolDisabled && disabledArray[0]">
              <span class="vue-slider-tooltip"  :class="tooltipClass" :style="tooltipStyles[0]">{{ formatter ? formatting(val[0]) : val[0] }}</span>
            </slot>
          </div>
        </div>
        <div
          ref="dot1"
          key="dot1"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 1,
              'vue-slider-dot-dragging': flag && currentSlider === 1,
              'vue-slider-dot-disabled': !boolDisabled && disabledArray[1]
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart($event, 1)"
          @touchstart="moveStart($event, 1)"
        >
          <slot name="dot" :value="val[1]" :index="1" :disabled="disabledArray[1]">
            <div
              class="vue-slider-dot-handle"
              :style="[
                (!boolDisabled && disabledArray[1])
                ? disabledDotStyles[1]
                : null,
                sliderStyles[1],
                focusFlag && focusSlider === 1 ? focusStyles[1]: null
              ]"
            ></div>
          </slot>
          <div ref="tooltip1" :class="['vue-slider-tooltip-' + tooltipDirection[1], 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val[1]" :index="1" :disabled="!boolDisabled && disabledArray[1]">
              <span class="vue-slider-tooltip" :class="tooltipClass" :style="tooltipStyles[1]">{{ formatter ? formatting(val[1]) : val[1] }}</span>
            </slot>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          v-if="staticValue !== void 0"
          ref="static-dot"
          key="static-dot"
          :class="[
            'vue-slider-dot',
            'vue-slider-dot--static',
            {
              'vue-slider-dot-active': isActive(getIndexByValue(staticValue)),
            }
          ]"
          class="vue-slider-dot static-dot"
          :style="[staticPosition, dotStyles]"
          @click.stop="() => setValue(staticValue)"
        >
          <slot name="static-dot" :value="staticValue">
            <div class="vue-slider-dot-handle--static"></div>
          </slot>

          <div
            v-if="val !== staticValue"
            :class="['vue-slider-tooltip-' + tooltipDirection, 'vue-slider-tooltip-wrap']">
            <slot name="static-tooltip" :value="staticValue">
              <span class="vue-slider-tooltip" :class="tooltipClass">
                <template v-if="staticLabel">
                  {{ staticLabel }}
                </template>
                <template v-else>
                  {{ formatter ? formatting(staticValue) : staticValue }}
                </template>
              </span>
            </slot>
          </div>
        </div>
        <div
          ref="dot"
          key="dot"
          :class="[
            tooltipStatus,
            'vue-slider-dot',
            {
              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
              'vue-slider-dot-dragging': flag && currentSlider === 0
            }
          ]"
          :style="dotStyles"
          @mousedown="moveStart"
          @touchstart="moveStart"
        >
          <slot name="dot" :value="val" :disabled="boolDisabled">
            <div
              class="vue-slider-dot-handle"
              :style="[
                sliderStyles,
                focusFlag && focusSlider === 0 ? focusStyles : null
              ]"
            ></div>
          </slot>
          <div :class="['vue-slider-tooltip-' + tooltipDirection, 'vue-slider-tooltip-wrap']">
            <slot name="tooltip" :value="val">
              <span class="vue-slider-tooltip"  :class="tooltipClass" :style="tooltipStyles">{{ formatter ? formatting(val) : val }}</span>
            </slot>
          </div>
        </div>
      </template>
      <ul class="vue-slider-piecewise">
        <li
          v-for="(piecewiseObj, index) in piecewiseDotWrap"
          class="vue-slider-piecewise-item"
          :style="[piecewiseDotStyle, piecewiseObj.style]"
          :key="index"
        >
          <slot
            name="piecewise"
            :value="val"
            :label="piecewiseObj.label"
            :index="index"
            :first="index === 0"
            :last="index === piecewiseDotWrap.length - 1"
            :active="isActive(piecewiseObj.index)"
          >
            <span
              v-if="piecewise"
              class="vue-slider-piecewise-dot" :class="{ 'active': isActive(piecewiseObj.index)}"
              :style="[ piecewiseStyle, isActive(piecewiseObj.index) ? piecewiseActiveStyle : null ]"
            ></span>
{'fraction_non_alphanumeric': 0.15978027227131597, 'fraction_numerical': 0.008279595573600827, 'mean_word_length': 1.6535699197296156, 'pattern_counts': {'":': 0, '<': 131, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '876566', 'n_tokens_mistral': 3635, 'n_tokens_neox': 3541, 'n_words': 576}