# GeoExt

### Navigation

- GeoExt »
- API Reference »
- Widgets »
- `GeoExt.ZoomSlider`

# `GeoExt.ZoomSlider`

Extends
  - Ext.Slider
xtype
  `gx_zoomslider`

class `GeoExt.``ZoomSlider`(config)
  Create a slider for controlling a map’s zoom level.

## Example Use

Sample code to render a slider outside the map viewport:

    var slider = new GeoExt.ZoomSlider({
        renderTo: document.body,
        width: 200,
        map: map
    });

Sample code to add a slider to a map panel:

    var panel = new GeoExt.MapPanel({
        renderTo: document.body,
        height: 300,
        width: 400,
        map: {
            controls: [new OpenLayers.Control.Navigation()]
        },
        layers: [new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        )],
        extent: [-5, 35, 15, 55],
        items: [{
            xtype: "gx_zoomslider",
            aggressive: true,
            vertical: true,
            height: 100,
            x: 10,
            y: 20
        }]
    });

## Config Options

Configuration properties in addition to those listed for Ext.Slider.

`aggressive`
  `Boolean` If set to true, the map is zoomed as soon as the thumb is moved. Otherwise the map is zoomed when the thumb is released (default).

`baseCls`
  `String` The CSS class name for the slider elements. Default is “gx-zoomslider”.

`map`
  `OpenLayers.Map` or `GeoExt.MapPanel` The map that the slider controls.

## Public Methods

Public methods in addition to those listed for Ext.Slider.

`ZoomSlider.``getResolution`()

  Returns: | `Number` The map resolution.

  Get the resolution for the associated map based on the slider value.

`ZoomSlider.``getScale`()

  Returns: | `Number` The map scale denominator.

  Get the scale denominator for the associated map based on the slider value.

`ZoomSlider.``getZoom`()

  Returns: | `Number` The map zoom level.

  Get the zoom level for the associated map based on the slider value.

### Navigation

- index
- modules |
- next |
- previous |
- GeoExt »
- API Reference »
- Widgets »
- `GeoExt.ZoomSlider`