I need to make this Range slider responsive. Text is getting overlapped when i start using in mobile version. Please help me to achieve this.
I have tried to add it in Table responsive and adding some responsive divs but still it didn't workout.
It would be great if someone help me to find out the way to make it responsive. You can see executable code in
@import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");
body {
font-family: "Catamaran", sans-serif;
background: #2b8aeb;
}
.container {
font-family: "Catamaran", sans-serif;
width: 600px;
margin: 30px auto 0;
display: block;
background: #fff;
padding: 10px 50px 50px;
border-radius: 4px;
box-shadow 0 6px 16px rgba(0,0,0,0.15)
}
.title {
text-align: center;
font-family: "Dancing Script", cursive;
color: #3949ab;
font-size: 35px;
}
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.label-slider:nth-child(1) {
padding-left: 0px;
}
.label-slider:nth-child(2) {
padding-left: 18px;
}
.label-slider:nth-child(3) {
padding-left: 34px;
}
.label-slider:nth-child(4) {
padding-left: 32px;
}
.label-slider:nth-child(5) {
padding-left: 32px;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
.ticks {
font-family: "Catamaran", sans-serif;
color: #3949ab;
font-size: 14px;
font-weight: 700;
display: flex;
justify-content: space-between;
height: 6px;
margin: 0 10px 0 15px;
counter-reset: count -1;
}
.ticks > div {
height: 100%;
width: 1px;
background: silver;
counter-increment: count 1;
}
.ticks > div:nth-child(5n - 4) {
height: 200%;
}
.ticks > div:nth-child(5n - 4)::before {
display: block;
content: counter(count,decimal);
transform: translate(-50%, 100%);
text-align: center;
width: 16px;
}<body>
<div class="container">
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire