CODEWITHSUNDEEP
javascripthtmlcss
Suraj-Ui
Suraj-Ui

Reputation: 196

How keep text right side like this in below image?

I have done this using below code but my text stays at left side it needs to start from right side like image if anyone have idea about this so please help me . I have included all details about this image and code for this problem check this sources and help me for it.

body {
  background-color: #00CED1;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 50%;
  height: 8px;
  border-radius: 5px;
  background: white outline: none;
  opacity: 3;
  -webkit-transition: .2s;
  transition: opacity .2s;
  background-image: linear-gradient(to right, #00a2a4 50%, #e6e6e6 50%);
  float: right;
}

.slider:hover {
  opacity: 3;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  display: none;
}

.slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  display: none;
}

span {
  color: white;
  font-size: 13px;
}
<body>
  <div style="width: 43%;">
    <div class="slidecontainer">
      <span>CREATIVITY</span> <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>
    <div class="slidecontainer">
      <span>CRITICAL THINKING</span> <input type="range" min="1" max="100" value="70" class="slider" id="myRange">
    </div>
    <div class="slidecontainer">
      <span>CREATIVITY</span> <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>
  </div>
</body>

enter image description here

Upvotes: 1

Views: 107

Answers (4)

Jack Munton
Jack Munton

Reputation: 11

Use flex box:

.slidecontainer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

Upvotes: 1

Katrine Mira Arndt Lind
Katrine Mira Arndt Lind

Reputation: 153

Add this to your code: 

.slidecontainer {
  width: 100%;
text-align: right;
}

Upvotes: 3

Nicolai Spartali
Nicolai Spartali

Reputation: 21

this should fix your code

.slidecontainer {
  width: 100%;
  text-align: right; 
}

Upvotes: 2

Umar Abdullah
Umar Abdullah

Reputation: 1290

You have to add align right in the container text-align: right;

I have update your snippet.

body {
  background-color: #00CED1;
}

.slidecontainer {
  width: 100%;
  text-align: right; 
}

.slider {
  -webkit-appearance: none;
  width: 50%;
  height: 8px;
  border-radius: 5px;
  background: white outline: none;
  opacity: 3;
  -webkit-transition: .2s;
  transition: opacity .2s;
  background-image: linear-gradient(to right, #00a2a4 50%, #e6e6e6 50%);
  float: right;
}

.slider:hover {
  opacity: 3;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  display: none;
}

.slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  display: none;
}

span {
  color: white;
  font-size: 13px;
}
<body>
  <div style="width: 43%;">
    <div class="slidecontainer">
      <span>CREATIVITY</span> <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>
    <div class="slidecontainer">
      <span>CRITICAL THINKING</span> <input type="range" min="1" max="100" value="70" class="slider" id="myRange">
    </div>
    <div class="slidecontainer">
      <span>CREATIVITY</span> <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>
  </div>
</body>

Upvotes: 1

Related Questions