pseudo slider input

dabblet.css

/* pseudo slider input */

body {
    margin: 2em;
}


/* slider input */

.pseudo-slider-input {
    margin: 60px auto;
}
.pseudo-slider-input {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: rgb(224, 161, 224);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.pseudo-slider-input[data-value]:before,
.pseudo-slider-input[data-value]:after {
    content:'';
    position: absolute;
    top: -10px;
    display: block;
    width: 0;
    height: 0;
    
}
.pseudo-slider-input[data-value]:before {
    margin-left: -10px;
    border: 12px solid #a31aa3;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.pseudo-slider-input[data-value]:after {
    margin-top: 9px;
    margin-left: -1px;
    border: 3px solid #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.pseudo-slider-input[data-value="0"]:before,
.pseudo-slider-input[data-value="0"]:after {
    left: 0;
}
.pseudo-slider-input[data-value="1"]:before,
.pseudo-slider-input[data-value="1"]:after {
    left: 10%;
}
.pseudo-slider-input[data-value="2"]:before,
.pseudo-slider-input[data-value="2"]:after {
    left: 20%;
}
.pseudo-slider-input[data-value="3"]:before,
.pseudo-slider-input[data-value="3"]:after {
    left: 30%;
}
.pseudo-slider-input[data-value="4"]:before,
.pseudo-slider-input[data-value="4"]:after {
    left: 40%;
}
.pseudo-slider-input[data-value="5"]:before,
.pseudo-slider-input[data-value="5"]:after {
    left: 50%;
}
.pseudo-slider-input[data-value="6"]:before,
.pseudo-slider-input[data-value="6"]:after {
    left: 60%;
}
.pseudo-slider-input[data-value="7"]:before,
.pseudo-slider-input[data-value="7"]:after {
    left: 70%;
}
.pseudo-slider-input[data-value="8"]:before,
.pseudo-slider-input[data-value="8"]:after {
    left: 80%;
}
.pseudo-slider-input[data-value="9"]:before,
.pseudo-slider-input[data-value="9"]:after {
    left: 90%;
}
.pseudo-slider-input[data-value="10"]:before,
.pseudo-slider-input[data-value="10"]:after {
    left: 100%;
}

dabblet.html

<div class="pseudo-slider-input" data-value="0"></div>
<div class="pseudo-slider-input" data-value="1"></div>
<div class="pseudo-slider-input" data-value="2"></div>
<div class="pseudo-slider-input" data-value="3"></div>
<div class="pseudo-slider-input" data-value="4"></div>
<div class="pseudo-slider-input" data-value="5"></div>
<div class="pseudo-slider-input" data-value="6"></div>
<div class="pseudo-slider-input" data-value="7"></div>
<div class="pseudo-slider-input" data-value="8"></div>
<div class="pseudo-slider-input" data-value="9"></div>
<div class="pseudo-slider-input" data-value="10"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}