/* Streamlined White on Black Horizontal Slider CSS */
.slider_bar
{
width: 200px;
height: 25px; /* Keep high for easier mouse and finger touch */
border: 1px solid black;
position: relative;
cursor:pointer;
background-color: #dddddd;
display: inline-block;
vertical-align: middle;
}
.slider_slot
{
/* Add a streamlined black slot */
width:100%;
height:25%; /* change height of slider slot for streamlined look */
top: 35%; /* change top of slider slot to be in middle */
background-color:black;
left:0px;
position:absolute;
}
.slider_buffer
{
width:50%;
height:25%; /* change height of slider buffer for streamlined look */
top: 35%; /* change top of slider buffer to be in middle */
background-color:#C0C0C0;
left:0px;
position:absolute;
}
.slider_control
{
width:0%;
height:25%; /* change height of slider control for streamlined look */
top: 35%; /* change top of slider control to be in middle */
background-color:white;
left:0px;
position:absolute;
}
.slider_knob
{
width: 12px;
height:50%; /* change height of slider knob for streamlined look */
top: 20%; /* change top of slider knob to be in middle */
border-radius: 25px; /* Turn knob into circle */
box-shadow: 1px 1px 2px #555555; /* Add shadow to knob */
background-color:white;
border: 1px solid black;
left:0px;
position:absolute;
}
/* Streamlined White on Black Vertical Slider CSS */
.vert_slider_bar
{
width: 25px; /* Keep wide for easier mouse and finger touch */
height: 200px;
border: 1px solid black;
position: relative;
cursor:pointer;
background-color: #dddddd;
display: inline-block;
}
.vert_slider_slot
{
/* Add a streamlined black slot */
width:25%; /* change width of slider slot for streamlined look */
height:100%;
left: 35%; /* change left of slider slot to be in middle */
background-color:black;
position:absolute;
}
.vert_slider_buffer
{
width:25%;
height:50%;
background-color:#C0C0C0;
bottom:0px;
left:35%;
position:absolute;
}
.vert_slider_control
{
width:25%; /* change width of vertical slider control for streamlined look */
height:50%; /* Start vertical slider control at middle position */
background-color:white;
bottom:0px;
left:35%; /* change left of slider control to be in middle */
position:absolute;
}
.vert_slider_knob
{
width: 12px;
height:12px; /* change height of slider knob for streamlined look */
top: 50%; /* Start vertical knob at middle position */
border-radius: 25px; /* Turn knob into circle */
box-shadow: 1px 1px 2px #555555; /* Add shadow to knob */
background-color:white;
border: 1px solid black;
left:20%; /* change left of slider knob to be in middle */
position:absolute;
}
/* Easy Grip Knob Horizontal Slider CSS */
.slider_bar
{
width: 200px;
height: 25px; /* Keep high for easier mouse and finger touch */
border: 1px solid black;
position: relative;
cursor:pointer;
background-color: #dddddd;
display: inline-block;
vertical-align: middle;
}
.slider_slot
{
/* Add a streamlined black slot */
width:100%;
height:25%; /* change height of slider slot for streamlined look */
top: 35%; /* change top of slider slot to be in middle */
background-color:black;
left:0px;
position:absolute;
}
.slider_buffer
{
width:50%;
height:25%; /* change height of slider buffer for streamlined look */
top: 35%; /* change top of slider buffer to be in middle */
background-color:#C0C0C0;
left:0px;
position:absolute;
}
.slider_control
{
width:0%;
height:25%; /* change height of slider control for streamlined look */
top: 35%; /* change top of slider control to be in middle */
background-color:white;
left:0px;
position:absolute;
}
.slider_knob
{
width: 25px;
height:75%; /* change height of slider knob for streamlined look */
top: 10%; /* change top of slider knob to be in middle */
box-shadow: 2px 0px 0px #555555; /* Add shadow to knob */
background: linear-gradient(45deg, #777777, #ffffff, #777777);
border: 1px solid black;
border-top: 0;
border-bottom: 0;
left:0px;
position:absolute;
overflow:hidden;
text-align: center;
}
.slider_knob:before{
background-color: #dddddd;
border: 1px solid black;
border-top: 0;
height: 100%;
border-radius: 50%;
width: 40px;
top: -85%;
left: -8px;
content: '';
display: block;
position: absolute;
}
.slider_knob:after{
background-color: #dddddd;
border: 1px solid black;
border-bottom: 0;
height: 100%;
border-radius: 50%;
width: 40px;
top: 85%;
left: -8px;
content: '';
display:block;
position: absolute;
}
/* Easy Grip Knob Vertical Slider CSS */
.vert_slider_bar
{
width: 25px; /* Keep wide for easier mouse and finger touch */
height: 200px;
border: 1px solid black;
position: relative;
cursor:pointer;
background-color: #dddddd;
display: inline-block;
}
.vert_slider_slot
{
/* Add a streamlined black slot */
width:25%; /* change width of slider slot for streamlined look */
height:100%;
left: 35%; /* change left of slider slot to be in middle */
background-color:black;
position:absolute;
}
.vert_slider_buffer
{
width:25%;
height:50%;
background-color:#C0C0C0;
bottom:0px;
left:35%;
position:absolute;
}
.vert_slider_control
{
width:25%; /* change width of vertical slider control for streamlined look */
height:50%; /* Start vertical slider control at middle position */
background-color:white;
bottom:0px;
left:35%; /* change left of slider control to be in middle */
position:absolute;
}
.vert_slider_knob
{
width: 75%;
height:25px; /* change height of slider knob for streamlined look */
top: 50%; /* Start vertical knob at middle position */
box-shadow: 0px 2px 0px #555555; /* Add shadow to knob */
background: linear-gradient(45deg, #777777, #ffffff 1px, #777777);
border: 1px solid black;
border-left: 0;
border-right: 0;
left:10%; /* change left of slider knob to be in middle */
position:absolute;
overflow:hidden;
text-align: center;
}
.vert_slider_knob:before{
background-color: #dddddd;
border: 1px solid black;
border-left: 0;
height: 40px;
border-radius: 50%;
width: 100%;
top: -8px;
left: -85%;
content: '';
display: inline-block;
position: absolute;
}
.vert_slider_knob:after{
background-color: #dddddd;
border: 1px solid black;
border-right: 0;
height: 40px;
border-radius: 50%;
width: 100%;
top: -8px;
left: 85%;
content: '';
display:block;
position: absolute;
}
Slider CSS Style: (Put in between <style> </style> tags just before </head> or
put in css file.)
Slider HTML:
History
4/1/2019 - Version 1.1 - Previously if the slider was contained in a fixed div then
the slider knobs would be off center. This has been fixed by using getBoundingClientRect()
to find the slider knobs position. Thank you to Randy
for finding and notifying about the problem.
12/02/2014 - Added vertical-align: middle; to all horizontal slider CSS for
better alignment.
11/21/2014 - Added display: inline-block; to all slider div's CSS so that
they could easily be displayed next to text.
11/10/2014 - Version 1.0 - "Very Simple Javascript Slider Control" Created
