slider_test

by Kim Ara

HTML

<div id="msrp_slider" class="slider">
		<h1 class="gc-heading-size-15">Pricing</h1>
		<div id="msrp" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all xb-gc-border-color-b" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><div class="ui-slider-range ui-widget-header ui-corner-all xb-app-background-color-a" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
		<div class="slider-value gc-theme-dark">
			<section class="slide-min gc-heading-size-19 gc-font-color-secondary">
				<span class="gc-background-color-c">$17,995</span>
			</section>
			<section class="slide-max gc-heading-size-19 gc-font-color-secondary">
				<span class="gc-background-color-c">$66,895</span>
			</section>
		</div>
	</div>

CSS

.slider h1{    font-family: "Roboto",sans-serif !important;
    font-size: 1.6rem;}
.xb-gc-border-color-b {
    background-color: #CCCCCC;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{border-bottom-right-radius: 4px;}
.ui-slider-horizontal{    height: .3em;
}
.ui-slider{     position: relative;
    text-align: left;}
.ui-slider-horizontal{    margin: 0 8px 7px;}


#filter-option .ui-slider .ui-slider-handle{height: 2.2em;
    width: 2.2em;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{background: url(https://www.jeep.com/crossbrand/lineup/assets/images/button.png) 0 0 no-repeat;}  
.ui-slider-horizontal .ui-slider-handle{top: -.4em;
    margin-left: -.6em;}
 .ui-slider .ui-slider-handle{    position: absolute;
    z-index: 2;
    width: 1.3em;
    height: 1.3em;
    cursor: default;
}  

.ui-slider-horizontal .ui-slider-range{    top: 0;
    height: 100%;}
.ui-slider .ui-slider-range    {    position: absolute;
    z-index: 1;
    /* font-size: .7em; */
    display: block;
    border: 0;
    background-position: 0 0;}
    .xb-app-background-color-a{background-color: #FFBA00;}