/* Custom Range Slider
Original Code by Nerdy Girl
https://codepen.io/nerdy-girl/pen/pooyRmW */
/* body {
position: relative;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
overflow: hidden;
} */
.paketSlider[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* width: 200px; */
width: 100%;
/* min-width: 420px; */
background-color: transparent;
}
.paketSlider[type=range]:focus {
outline-color: #f8b195;
}
.paketSlider[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
height: 3px;
background: #f67280;
background: -webkit-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
.paketSlider[type=range]::-moz-range-track {
-moz-appearance: none;
appearance: none;
height: 3px;
background: #f67280;
background: -moz-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
.paketSlider[type=range]::-ms-track {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3px;
background: #f67280;
background: -moz-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
background: -webkit-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
.paketSlider[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: 2px solid #f8b195;
border-radius: 50%;
height: 20px;
width: 20px;
position: relative;
bottom: 8px;
background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
background-size: 50%;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
cursor: grab;
}
.paketSlider[type=range]::-webkit-slider-thumb:active {
cursor: grabbing;
}
.paketSlider[type=range]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
border: 2px solid #f8b195;
border-radius: 50%;
height: 20px;
width: 20px;
position: relative;
bottom: 8px;
background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
background-size: 50%;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
cursor: grab;
}
.paketSlider[type=range]::-moz-range-thumb:active {
cursor: grabbing;
}
.paketSlider[type=range]::-ms-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #f8b195;
border-radius: 50%;
height: 20px;
width: 20px;
position: relative;
bottom: 8px;
background: #222 url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png") center no-repeat;
background-size: 50%;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
cursor: grab;
}
.paketSlider[type=range]::-ms-thumb:active {
cursor: grabbing;
}