#

## OpenLayers Workshop

# The jQuery UI Slider

The jQuery UI slider widget creates a draggable handle that can be configured to return a value based on the handle position. Raster layers in OpenLayers provide a `setOpacity` method that controls the image opacity and accepts values between 0 (totally transparent) and 1 (totally opaque). A jQuery UI slider widget is a user-friendly way to set layer opacity in an OpenLayers map.

A jQuery UI slider can be created with something like the following markup.

    <div id="slider-id">
        <div class="ui-slider-handle"></div>
    </div>

To give these elements the slider behavior, you would run the following code.

    jQuery("#slider-id").slider();

The `jQuery` function is also exported under the alias `$`. In the examples below, you’ll see the use of the `$` function. This is entirely equivalent to using the `jQuery` function.

## Using a Slider to Control Layer Opacity

We’ll start with a working example that displays one WMS (OGC Web Map Service) layer and one vector layer with features from a WFS (OGC Web Feature Service).

Tasks

1. Open your text editor and save the following as `map.html` in the root of your workshop folder:

       <html>
           <head>
               <title>My Map</title>
               <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
               <style>
                   #map-id {
                       width: 512px;
                       height: 256px;
                   }
               </style>
               <script src="openlayers/lib/OpenLayers.js"></script>
           </head>
           <body>
               <h1>My Map</h1>
               <div id="map-id"></div>
               <script>
                   var medford = new OpenLayers.Bounds(
                       4284890, 254385,
                       4288865, 258380
                   );
                   var map = new OpenLayers.Map("map-id", {
                       projection: new OpenLayers.Projection("EPSG:2270"),
                       units: "ft",
                       maxExtent: medford,
                       restrictedExtent: medford,
                       maxResolution: 2.5,
                       numZoomLevels: 5
                   });

                   var base = new OpenLayers.Layer.WMS(
                       "Medford Streets & Imagery",
                       "/geoserver/wms",
                       {layers: "medford"}
                   );
                   map.addLayer(base);

                   var buildings = new OpenLayers.Layer.Vector("Buildings", {
                       strategies: [new OpenLayers.Strategy.BBOX()],
                       protocol: new OpenLayers.Protocol.WFS({
                           url: "/geoserver/wfs",
                           featureType: "medford_buildings",
                           featureNS: "http://medford"
                       })
                   });
                   map.addLayer(buildings);

                   map.zoomToMaxExtent();
               </script>
           </body>
       </html>

2. Next we need to pull in the jQuery resources that our widgets will require. Add the following markup to the `<head>` of your `map.html` document:

       <link rel="stylesheet" href="jquery-ui/css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css">
       <script src="jquery-ui/js/jquery-1.3.2.min.js"></script>
       <script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js"></script>

3. The slider widget needs some markup to start with. Insert the following in the `<body>` of your `map.html` page, just after the map viewport, in order to create a container for the slider:

       <div id="slider-id"><div class="ui-slider-handle"></div></div>

4. One bit of preparation before finalizing the code is to style the slider container. In this case, we’ll make the slider as wide as the map and give it some margin. Insert the following style declarations into the `<style>` element within the `<head>` of your document:

       #slider-id {
           width: 492px;
           margin: 10px;
       }

5. Having pulled in the required jQuery resources, created some markup for the widget, and given it some style, we’re ready to add the code that creates the slider widget. In the `<script>` element that contains your map initialization code, insert the following to create the slider widget and set up a listener to change your layer opacity as the slider value changes:

       $("#slider-id").slider({
           value: 100,
           slide: function(e, ui) {
               base.setOpacity(ui.value / 100);
           }
       });

6. Save your changes to `map.html` and open the page in your browser: http://localhost/ol_workshop/map.html

   A map with a slider widget to control layer opacity.

Bonus Task

1. In the jQuery documentation, find the options for the slider function that allow you to specify a number of incremental steps within the slider range. Experiment with adding discrete intervals to the slider range. Modify the end values of the range to restrict opacity settings.

Having mastered the jQuery UI slider, you’re ready to start working with dialogs.

### Navigation

- index
- modules |
- next |
- previous |
- OpenLayers Workshop »
- Integration with Other Frameworks »
- The jQuery UI Slider