HTML:

<div class="range-filter">
  <div class="range-controls">
    <div class="scale">
      <div class="bar" style="width: 60%%"></div>
      <div class="toggle min-toggle"></div>
      <div class="toggle max-toggle"></div>
    </div>
  </div>
  <div class="price-controls">
    от <input class="min-price" name="min-price" type="text" value="0" disabled>
    до <input class="max-price" name="max-price" type="text" value="5000" disabled>
  </div>
</div>


CSS:

.price-filter .range-filter{
	width: 200px;
	margin-top: 8px;
}

.range-filter .range-controls{
	position: relative;
	height: 14px;
}

.range-controls .scale{
	margin-top: 6px;
	height: 2px;
	background-color: #dcdcdc;
}

.range-controls .bar{
	height: 2px;
	background-color: #72ca00;
}

.range-controls .toggle{
	position: absolute;
	top: -6px;
	left: -2px;
	width: 10px;
	height: 10px;
	background-color: #efefef;
	border: 2px solid #000;
	border-radius: 50%;
	cursor: pointer;
	transition: all .25s ease;
}

.range-controls .max-toggle{
	left: 110px;
}

.range-controls .min-toggle:hover,
.range-controls .max-toggle:hover{
	background-color: #63b000;
	border: 2px solid #fff;
	-webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .75);
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .75);
}

.price-filter .price-controls{
	font-size: 14px;
	line-height: 22px;
	color: rgba(0, 0, 0, .4);
}

.price-controls input{
	display: inline-block;
	vertical-align: top;
	width: 50px;
	padding: 0 2px;
	margin-left: 0px;
	font-family: "Gilroy Light", "Arial", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, .4);
	border: none;
	background-color: transparent;
}

.price-controls .min-price{
	margin-right: 14px;
}

.price-controls{
	white-space: nowrap;
}