要实现不重新绘制地图的情况下，改变地图范围并使用滑块来改变显示的数据，可以使用JavaScript和地图库（如Leaflet或Mapbox）进行操作。以下是一个使用Leaflet库的代码示例：

HTML部分：

JavaScript（app.js）部分：

// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
}).addTo(map);

// 创建滑块元素
var slider = document.getElementById("slider");

// 监听滑块值改变事件
slider.addEventListener("input", function() {
  // 获取滑块值
  var value = parseInt(this.value);

  // 根据滑块值更新地图范围
  map.setView([51.505, -0.09], value);
});

// 初始化时触发滑块值改变事件
slider.dispatchEvent(new Event("input"));

在以上示例中，我们创建了一个包含地图和滑块的HTML页面。通过使用Leaflet库，我们可以创建一个地图实例，并将其添加到指定的HTML元素中。然后，我们为滑块元素添加了一个事件监听器，当滑块值改变时，会根据新的滑块值来更新地图范围。最后，我们在页面加载时手动触发了滑块值改变事件，以确保初始地图范围正确。