• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
127 wizyt
pytanie zadane 7 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
<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ść

2 odpowiedzi

+1 głos
odpowiedź 12 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 12 kwietnia 2021 przez VBService

Można:

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

 

Propozycja  smiley  (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;
}

1
komentarz 12 kwietnia 2021 przez niezalogowany

smiley extraordinary ..yes

0 głosów
odpowiedź 12 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

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 %

komentarz 12 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
dziękuję bardzo :)

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

Podobne pytania

0 głosów
1 odpowiedź 258 wizyt
0 głosów
1 odpowiedź 154 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,560 p.)
0 głosów
2 odpowiedzi 172 wizyt
pytanie zadane 3 maja 2019 w JavaScript przez MrxCI Dyskutant (8,260 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...