wartość range slidera pojawia się po najechaniu na range slider

Question

<p class="content1">Game resolution</p>                                                                        
                                                <input class="slider1" id="my-range1" type="range" min="50" max="200" value="50" step="10" onChange="myRange1(this.value)" onmousemove="myRange1(this.value)">
                                                <p class="value1">Value: <span id="value1"></span>%</p>

                                                <p class="content2">Text hiding threshold</p>                                                                        
                                                <input class="slider2" id="my-range2" type="range" min="10" max="80" value="10" step="5"  onChange="myRange2(this.value)" onmousemove="myRange2(this.value)"> 
                                                <p class="value2">Value: <span id="value2"></span>px</p>

.slider1 {
    -webkit-appearance: none;
    width: 300px;
    height: 6px; 
    outline: none;
    border-radius: 5px;
    background-color: #c6aee7;
    transform: translate(2%, -450%);
  }
  
  .content1 {
    font-size: 15px;
    color: #fff;
    transform: translate(3%, -20%);
  }

  .value1 {
    font-size: 12px;
    transform: translate(75%, -410%);
    opacity: 0.8;
  }
  
  ::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 4px solid #6200ee;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    box-shadow: 0 0 0 rgba(98, 0, 238, .1);
    transition: .3s ease-in-out;
  }

  ::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(99, 0, 238, 0.24);
  }

  :active::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px rgba(98, 0, 238, 0.24);
    border: 3px solid #6200ee;
    background-color: #6200ee;
   }

   .slider2 {
    -webkit-appearance: none;
    width: 300px;
    height: 6px; 
    outline: none;
    border-radius: 5px;
    background-color: #c6aee7;
    transform: translate(2%, -1400%);
  }
  
  .content2{
    font-size: 15px;
    color: #fff;
    transform: translate(3%, -270%);
  }

  .value2 {
    font-size: 12px;
    transform: translate(75%, -730%);
    opacity: 0.8;
  }
  
  ::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 3px solid #6200ee;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    box-shadow: 0 0 0 rgba(98, 0, 238, .1);
    transition: .3s ease-in-out;
  }

  ::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(99, 0, 238, 0.24);
  }

  :active::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px rgba(98, 0, 238, 0.24);
    border: 3px solid #6200ee;
    background-color: #6200ee;
   }

function myRange1(value) {
            document.getElementById('value1').innerHTML = value;
        }

        function myRange2(value) {
            document.getElementById('value2').innerHTML = value;
        }

Licznik wartości range slidera pojawia się dopiero po najechaniu na slider, ale chciałbym żeby od razu pojawiała się wartość. Wygląda to jak na zdjęciu poniżej. Dopiero jak najadę na slider pojawia się podstawowa wartość

Answer 1

Można:

window.onload = () => {
    myRange1(document.getElementById('my-range1').value);
    myRange2(document.getElementById('my-range2').value);
}

 

Propozycja    (zmiany w:)

<input class="slider1" id="my-range1" type="range" min="50" max="200" value="50" step="10" onChange="myRange(this)" onmousemove="myRange(this)">

. . .

<input class="slider2" id="my-range2" type="range" min="10" max="80" value="10" step="5"  onChange="myRange(this)" onmousemove="myRange(this)">

window.onload = () => {
  myRange(document.getElementById('my-range1'));
  myRange(document.getElementById('my-range2'));
}

function myRange(elem) {
  const id = elem.id.replace('my-range','value');
  document.getElementById(id).innerHTML = elem.value;
}

 

 

dla zrozumienia jak to działa dopisz np.:

function myRange(elem) {
  console.log('value: '+elem.value, 'id: '+elem.id); // test
  
  const id = elem.id.replace('my-range','value');
  
  console.info('id po zmianie: '+id); // test
  
  document.getElementById(id).innerHTML = elem.value;
}

Comments

 extraordinary ..

Answer 2

Witaj,

Nie wiem czy to wciąż aktualny problem, ale jeżeli tak, to chyba najprostszym rozwiązaniem jest po prostu na sztywno wpisać w HTML początkowe wartości minimalne

<p class="value2">Value: <span id="value2"></span>px</p>

na coś takiego

<p class="value2">Value: <span id="value2">10</span>px</p>

analogicznie z %

Comments

dziękuję bardzo :)

nie mogę uwierzyć, że na to wcześniej nie wpadłem