How to create opacity for three layers using one opacity slider in Open Layers 3?

Question

I have three layers,i want to create only one opacity slider for three layers.I have done some code but it works only for single opacity slider of single layer.I want to show all three layers in one opacity slider.

var layout =new ol.layer.Group({
                                title:'layout',
                        layers: [
                                new ol.layer.Tile({
                                  source: new ol.source.TileWMS({
                                    url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F18_12013_india"
                                        }
                                    })
                                }),
            new ol.layer.Tile({
                                    title:'boundry',
                                    source: new ol.source.TileWMS({
                                    url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F14_12000_India"
                                        }
                                    })
                                }),
                    new ol.layer.Tile({
                                     title:'b_90',
                                    source: new ol.source.TileWMS({
                                        url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F10_11992_india"
                                        }
                                    })
                                })
                            ]
                    });
             var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Group({
                        'title': 'Base maps',
                        layers: [
                           new ol.layer.Tile({
                           source: new ol.source.OSM()
                            })
                                ]
                    }),layout],

                    target: 'map',
                    view: new ol.View({
                    center: ol.proj.transform([85.5639,22.6726], 'EPSG:4326', 'EPSG:3857'),
                                    zoom:5,
                                    minZoom:3,
                                    maxZoom: 70
                })
              });

              var checkbox_study = document.getElementById('visible4');
                        if(checkbox_study)
                        {
                        checkbox_study.addEventListener('change', function () {
                                layout.setVisible(this.checked);
                        });
                        }

                        function bindInputs(layerid, layer) {
                            var opacityInput = $(layerid + ' input.opacity');

                            opacityInput.on('input change', function () {
                                layer.setOpacity(parseFloat(this.value));
                            });
                            opacityInput.val(String(layer.getOpacity()));
                        }
                        map.getLayers().forEach(function (layer, i) {
                            bindInputs('#layer' + i, layer);
                            layer.getLayers().forEach(function (sublayer, j) {
                                bindInputs('#layer' + i + j, sublayer);
                            });
                        });

Is there any missing in my code.This is working code code for one layer opacity ,Thanks.

Answer 1

This problem is solved with help of Viglino. Please check below link on Viglino OL3-GitHub repository. Github Link