Html slider with text on each side - html

Question

I have a question about html and css. I am trying to make an div with text---slider--text. Here is the photo of how it supposed to look.
This is my current situation.
I hope someone can help me with getting this elements on 1 line.
.information_seperator {
height: 4vh;
background-color: #ffffff;
}
.divider {
width: 50vw;
background-color: #ffc539;
margin-top: 0px;
margin-bottom: 0px;
}
.divider:after {
content: " ";
width: 5px;
height: 5px;
position: relative;
top: 0;
right: 10px;
background-color: #ffc539;
}
<div class="information_seperator">
<!--<div class="row">-->
<span class="text_info">AMS</span>
<hr class="divider">
<!--<input data-provide="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20"/>-->
<!--<span style="color: #ffc539">●</span>-->
<span>JFC</span>
<!--</div>-->
</div>

Answer 1

You can do this with Flexbox and JQuery UI
$('.circle').draggable({
axis: "x",
containment: ".line"
});
.slider {
display: flex;
align-items: center;
}
.line {
flex: 1;
height: 4px;
background: #FBC538;
position: relative;
margin: 0 10px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: #FBC538;
position: absolute;
left: 0;
top: -8px;
}
span:not(.circle) {
font-size: 30px;
font-weight: bold;
font-family: Sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider">
<span>AMS</span>
<div class="line"><span class="circle"></span></div>
<span>JFC</span>
</div>

Answer 2

I think you need to read up on
display: inline-block

Answer 3

To align elements next to one another use : display:inline;
Example :
span,
div {
display: inline;
}
//Slider
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<span>text</span>
<div>
<input type=range />
</div>
<span>text</span>