stdbWeb/jwt/sample/css/fd-slider.css

/* The styles given to the associated form element in order to hide it */
.fd-form-element-hidden
        {
        display:none;
        }
/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider
        {
        width:100%;
        /* The height of the slider handle */
        height:20px;
        margin:0;
        }
/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider-vertical
        {
        /* The width of the slider handle */
        width:20px;
        /* Fill the available space */
        height:100%;
        /* Set a 10 pixel right and bottom margin */
        margin:0 10px 10px 0;
        /* You may wish to float the vertical sliders left or display:inline-block */
        /* float:left; */
        }
/* Shared rules - both horizontal & vertical sliders */
.fd-slider,
.fd-slider-vertical
        {
        /* display:block required as the wrapper element is a span */
        display:block;
        /* This lets us absolutely position the drag handle */
        position:relative;
        text-decoration:none;
        border:0 none;
        -moz-user-select:none;
        -khtml-user-select:none;
		  margin-top:1em;
        -webkit-touch-callout:none;
        user-select:none;
        }
.fd-slider-inner
        {
        /* Used by IE for the onfocus blur effect */
        display:none;
        }

/* The inner track bar */
.fd-slider-bar
        {
        position:absolute;
        display:block;
        z-index:2;
        height:10px;
        width:100%;
        margin:0;
        padding:0;
        overflow:hidden;
        line-height:4px;
        top:9px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #44b7e5;
        }
/* The animated range bar */
.fd-slider-range
        {
        position:absolute;
        display:block;
        z-index:3;
        height:10px;
        margin:0;
        padding:0 2px 0 0;
        overflow:hidden;
        top:9px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #e1e4e9;
        box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
  -webkit-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
  -moz-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
  -o-box-shadow: inset 0px 0px 0px #0076B3, 0px 0px 0px 0px #1B455A, 0px 2px 1px #FFF;
  border-radius:4px;
        }
/* The drag handle */
.fd-slider-handle
        {
        position:absolute;
        display:block;
        padding:0;
        border:0 none;
        margin:0 0 0 1px;
        z-index:3;
        top:5px;
        left:0;
        width:18px;
        height:18px;
        line-height: 1px !important;
        outline:0 none;
        background: #fff;
        border-radius: 12px;
        -webkit-user-select: none;
        -webkit-touch-callout:none;
        -moz-user-select:none;
        -moz-user-focus:none;
        -moz-outline:0 none;
        user-select:none;
		cursor: pointer;
        }
/* Focus styles */
.fd-slider-handle:focus
        {
        outline:0 none;
        border:0 none;
        -moz-user-focus:normal;
        }
button.fd-slider-handle:focus::-moz-focus-inner
        {
        border-color: transparent;
        }

body.fd-slider-drag-vertical,
body.fd-slider-drag-vertical *
        {
        /* Stop text selection */
        -moz-user-select:none;
        -webkit-user-select:none;
        user-select:none;
        }
body.fd-slider-drag-horizontal,
body.fd-slider-drag-horizontal *
        {
        /* Stop text selection */
        -moz-user-select:none;
        -webkit-user-select:none;
        user-select:none;
        }
		
@media screen and (max-width: 1024px) {
	.fd-slider, .fd-slider-vertical {
		margin-top: 1em;
	}
}