input range make small vertical lines in on the horizontal line

Question

I have input range, I want to make small vertical lines on the horizontal line for each line for every default step.

My range goes from 0 to 40 I need small vertical line on 10,20,30 Please No jQuery or outside library cause the framework I'm using won't allow it.

<input id="myRange" step="10" name="foo"  type="range" min="0" max="40" value="{!v.resourseHours}" class="slider" onchange="{!c.resourseInput}" />

something like the image on the bottom and on the top of each line i want to have the number 10,20,30

Answer 1

You want to use some type of overlay/underlay to achieve that effect.

.slider-wrapper {
  position: relative;
  width: 150px;
}

.slider {
  width: 150px;
  margin: 0;
  padding: 0;
}

.underlay {
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
}

.breakpoint {
  width: Calc(100%/4);
}

.breakpoint:not(:first-child) {
  border-left: 1px solid green;
}

<div class="slider-wrapper">
  <div class="underlay">
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
  </div>
  <input id="myRange" step="1" name="foo" type="range" min="0" max="40" class="slider" />
</div>