Ползунки ввода [диапазон] не отображаются в Edge, но отображаются в любом другом браузере нормально. Вождение меня запасной

Question

Ползунки ввода [диапазон] не отображаются в Edge, но отображаются в любом другом браузере нормально. Сводит меня с ума.

Возможно, это что-то простое, надеюсь, но я никогда раньше не использовал input [range]. Любая помощь с благодарностью.

В Edge / IE это выглядит так: Edge / IE версия

Chrome, Safari и Firefox

#sliders {
  text-align: center;
  padding: 7px 0px;
  width: auto;
}

#sliderX1,
#sliderX2 {
  display: inline;
  width: auto;
}

.Xslider {
  display: inline;
  position: relative;
  margin: 10px 4px;
  padding: 10px 4px;
  border: 1px dotted #006699;
  border-radius: 4px;
  min-width: 45%;
}

.deadzone {
  position: absolute;
  top: 0.4rem;
  left: 2rem;
  background: rgba(0, 100, 150, 0.4);
  width: 2rem;
  height: 1.4rem;
  border-radius: 2px;
}

<div id="sliders">
  <datalist id="plus-stopsX">
		<option>200</option><option>400</option><option>600</option><option>700</option><option>800</option><option>900</option><option>1000</option> 
	</datalist>
  <datalist id="minus-stopsX">
		<option>-200</option><option>-400</option><option>-600</option><option>-700</option><option>-800</option><option>-900</option><option>-1000</option> 
	</datalist>
  <div class="Xslider">
    <div class="deadzone"></div>
    <label for="sliderX1">X1</label>
    <input id="sliderX1" type='range' min="0" max="1000" value="300" step="10" list="plus-stopsX" onchange="changeitem();">
  </div>
  <div class="Xslider">
    <label for="sliderX2">X2</label>
    <input id="sliderX2" type='range' min="-1000" max="0" value="-200" step="10" list="minus-stopsX" onchange="changeitem();">
  </div>
</div>

Answer 1

Попробуйте установить фиксированное или процентное значение для свойства width sliderX1 и sliderX2 вместо использования auto.

    #sliders {
        text-align: center;
        padding: 7px 0px;
        width: auto;
    }

    #sliderX1,
    #sliderX2 {
        display: inline;
        width:15%;
    }

    .Xslider {
        display: inline;
        position: relative;
        margin: 10px 4px;
        padding: 10px 4px;
        border: 1px dotted #006699;
        border-radius: 4px;
        min-width: 45%;
    }

    .deadzone {
        position: absolute;
        top: 0.4rem;
        left: 2rem;
        background: rgba(0, 100, 150, 0.4);
        width: 2rem;
        height: 1.4rem;
        border-radius: 2px;
    }

Затем в браузере Edge / IE это выглядит так: