I am attempting to create a vertical splitter to use as the background of a custom slider (similar to the one found here ). Can anyone help with how I can achieve this? Here is what I have tried so far:
<div id="wrapper">
<div id="dragger">
<div class="rect"></div>
<div class="arrow-down"></div>
</div>
<div id="slide-container"></div>
</div>
<br />
<span class="drag-caption active" id="hi-caption">Hi, bot</span> <span class="drag-caption" id="keep-caption">Keep sliding...</span> <span class="drag-caption" id="submit-caption">Submit</span>
Here is the corresponding CSS:
* {
font-family: calibri
}
#dragger {
width: 10px;
padding: 5px 10px 5px 5px;
}
.rect {
background-color: #ccc;
height: 15px;
width: 10px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ccc;
}
#wrapper {
z-index: 55;
width: 200px;
padding: 0 10px;
}
#slide-container {
background: #dedede;
height:2px;
border-radius: 1px;
margin-top:-18px;
}
.drag-caption {
padding-right: 20px;
color: #d4d4d4;
-webkit-transition: color 500ms ease;
-moz-transition: color 500ms ease;
-ms-transition: color 500ms ease;
-o-transition: color 500ms ease;
transition: color 500ms ease;
}
.drag-caption.active {
color: black;
}
#submit-caption{
font-weight: bold;
}
Additionally, you can view the code on jsfiddle. My goal is to have the separators aligned with the captions and positioned directly on the background bar.
Something like this:
---|---------|------------|
| | |
Hi bot Keep sliding Submit