.cx-slider-wrap{
display: flex;
flex-wrap: wrap;
.cx-slider-input{
flex: 0 1 10%;
min-width: 100px;
max-width: 200px;
}
.cx-slider-holder{
flex: 0 1 90%;
min-width: 200px;
max-width: 300px;
margin-right: 10px;
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
height: 16px;
width: 16px;
margin-top: -6px;
border-radius: 15px;
background: white;
cursor: pointer;
-webkit-appearance: none;
transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a4afb7;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: none;
background: #a4afb7;
border-radius: 25px;
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: none;
border: none;
height: 16px;
width: 16px;
border-radius: 15px;
background: #a4afb7;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: $grey_color_3;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: $grey_color_3;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-fill-upper {
background: $green_color;
border: none;
border-radius: 50px;
box-shadow: none;
}
input[type=range]::-ms-thumb {
box-shadow: none;
border: none;
height: 10px;
width: 10px;
border-radius: 15px;
background: #495159;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: $grey_color_3;
}
input[type=range]:focus::-ms-fill-upper {
background: $green_color;
}
}
.cx-input{
margin: 0;
width: 100%;
}
}