Merhaba her iki HTML dosyasında da common.js dosyasını çağırarak, initSliderRange fonksiyonunu paylaştık. Böylece her iki sayfa da aynı JavaScript kodunu kullanacak ve sorununuz çözülebilir diye düşünüyorum.


// common.js dosyası bir ortak js component gibi düşünün


function initSliderRange(sliderId, valueId) {
    var range = document.getElementById(sliderId);
    var rangeValue = document.getElementById(valueId);
 
    range.addEventListener('input', function () {
        var value = parseFloat(range.value).toFixed(1);
        rangeValue.textContent = value;
    });
}
Sayfa 1 html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa 1</title>
</head>
<body>

<div class="d-flex flex-column text-center mb-5">
    <div class="d-flex align-items-start justify-content-center mb-7">
        <span class="fw-bold fs-3x" id="selectedValue1">0.1</span>
    </div>
    <input type="range" min="0.1" max="1.0" step="0.1" value="0.1" id="SliderRange1">
</div>

<!-- common.js dosyasını çağır -->
<script src="assets/js/common.js"></script>

<!-- SliderRange1 için özel çağrı -->
<script>
    initSliderRange('SliderRange1', 'selectedValue1');
</script>

</body>
</html>
Sayfa 2 html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa 2</title>
</head>
<body>

<div class="d-flex flex-column text-center mb-5">
    <div class="d-flex align-items-start justify-content-center mb-7">
        <span class="fw-bold fs-3x" id="selectedValue2">0.1</span>
    </div>
    <input type="range" min="0.1" max="1.0" step="0.1" value="0.1" id="SliderRange2">
</div>

<!-- common.js dosyasını çağır -->
<script src="assets/js/common.js"></script>

<!-- SliderRange2 için özel çağrı -->
<script>
    initSliderRange('SliderRange2', 'selectedValue2');
</script>

</body>
</html>