Responsive PW Generator app using utility classes

Community feedback

• 

  P

  RadaidehDaniel•430

  @RadaidehDaniel

  Posted 12 months ago

  Good job.

  The following example is how I deal with the range input. I hope this will be helpful.

  HTML

  <div class="slider">
                <label for="character-length">Character Length</label>
                <p id="slider-value">10</p>
                <input
                  type="range"
                  id="character-length"
                  name="character-length"
                  min="1"
                  max="18"
                  step="1"
                  value="10"
                />
              </div>
  

  CSS

  .slider {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 1.6rem;
  
    margin-block-end: 3.2rem;
  }
  
  .slider label {
    font-size: 1.8rem;
    font-weight: var(--font-bold);
    color: #e7e6eb;
  }
  
  .slider p {
    text-align: right;
  
    font-size: 3.2rem;
    font-weight: var(--font-bold);
    color: #a4ffaf;
  }
  
  #character-length {
    grid-column: 1/3;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
  
    background: linear-gradient(
      to right,
      #a4ffaf 0%,
      #a4ffaf 50%,
      #18171f 50%,
      #18171f 100%
    );
  }
  
  #character-length:focus {
    outline: none;
  }
  
  /***** Chrome, Safari, Opera, and Edge Chromium *****/
  #character-length::-webkit-slider-runnable-track {
    height: 0.8rem;
  }
  
  #character-length::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #e7e6eb;
    border-radius: 50%;
    height: 2.8rem;
    width: 2.8rem;
    margin-top: -10px;
  }
  
  #character-length:focus::-webkit-slider-thumb {
    background-color: #18171f;
    border: 1px solid #a4ffaf;
  }
  
  /******** Firefox ********/
  #character-length::-moz-range-track {
    height: 0.8rem;
  }
  
  #character-length::-moz-range-thumb {
    background-color: #e7e6eb;
    border: none;
    border-radius: 50%;
    height: 2.8rem;
    width: 2.8rem;
    margin-top: -10px;
  }
  
  #character-length:focus::-moz-range-thumb {
    background-color: #18171f;
    border: 1px solid #a4ffaf;
  }
  

  JavaScript

  const slider = document.getElementById("character-length");
  
  function renderSliderValue(e) {
    valueSlider.textContent = e.target.value;
  }
  
  function renderSlider(ele) {
    var value = ((ele.value - ele.min) / (ele.max - ele.min)) * 100;
    ele.style.background =
      "linear-gradient(to right, #a4ffaf 0%, #a4ffaf " +
      value +
      "%, #18171f " +
      value +
      "%, #18171f 100%)";
  }
  
  slider.addEventListener("input", function (e) {
    renderSliderValue(e);
    renderSlider(e.target);
  });
  

  00