(function() {

    var Event_Font = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "slider-bg-font", thumb = "slider-thumb-font",
                                valuearea = "slider-value-font", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Font.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }
        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);


            // Display the pixel value of the control

            document.getElementById("hFontSlider").value = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);
            //valnode.innerHTML = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);


            //document.getElementById("hSliderFontRealVal").value = offsetFromStart;
            // use the scale factor to convert the pixel offset into a real

            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;
        });
        //slider.setValue(Number(InitialValue));
        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });
        //document.getElementById("sliderVal");


        Event_Font.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("hFontSlider").value * 10 )-240), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Slider = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "slider-bg1", thumb = "slider-thumb1",
                                valuearea = "slider-value1", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Slider.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("hLetterSlider").value = offsetFromStart / 20 + 2;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event_Slider.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("hLetterSlider").value * 20 )-40), false); //false here means to animate if possible
        });
    });
})();




(function() {

    var Event_Outline = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "slider-bg", thumb = "slider-thumb",
                                valuearea = "slider-value", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Outline.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;

            document.getElementById("hOutlineSlider").value = offsetFromStart / 20;

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
       Event_Outline.on("setSliders", "click", function(e) {
       		slider.setValue(Number((document.getElementById("hOutlineSlider").value*20)),false); //false here means to animate if possible
       });
    });
})();


(function() {

    var Event_Arc = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        lang = YAHOO.lang,
        slider,
        bg = "slider-bg-arc", thumb = "slider-thumb-arc",
        valuearea = "slider-value-arc", textfield = "slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Arc.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                         thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            var cmbArcSlider = document.getElementById("fronttexteffect");
            var cmbSelectedvalue = cmbArcSlider.options[cmbArcSlider.selectedIndex].value;
			document.getElementById("hArcSlider").value = offsetFromStart+16;
           /* if (cmbSelectedvalue == 1) {
                //valnode.innerHTML = offsetFromStart;
                
            }
            else if (cmbSelectedvalue == 2) {
                //valnode.innerHTML = -offsetFromStart;
                document.getElementById("hArcSlider").value = -offsetFromStart;
            }*/

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });



        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
         Event_Arc.on("setSliders", "click", function(e) {
            slider.setValue(Number(document.getElementById("hArcSlider").value-16), false); //false here means to animate if possible
        });
    });
})();
<!----------------------------------------------------------------------------------------------------------------------------------->
(function() {

    var Event_Font = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "bslider-bg-font", thumb = "bslider-thumb-font",
                                valuearea = "slider-value-font", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Font.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }
        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);


            // Display the pixel value of the control

            document.getElementById("bFontSlider").value = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);
            //valnode.innerHTML = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);


            //document.getElementById("hSliderFontRealVal").value = offsetFromStart;
            // use the scale factor to convert the pixel offset into a real

            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;
        });
        //slider.setValue(Number(InitialValue));
        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });
        //document.getElementById("sliderVal");


        Event_Font.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("bFontSlider").value * 10 )-240), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Slider = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "bslider-bg1", thumb = "bslider-thumb1",
                                valuearea = "slider-value1", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Slider.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("bLetterSlider").value = offsetFromStart / 20 + 2;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event_Slider.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("bLetterSlider").value * 20 )-40), false); //false here means to animate if possible
        });
    });
})();




(function() {

    var Event_Outline = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "bslider-bg", thumb = "bslider-thumb",
                                valuearea = "slider-value", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Outline.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("bOutlineSlider").value = offsetFromStart / 20;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
       Event_Outline.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("bOutlineSlider").value * 20 )), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Arc = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        lang = YAHOO.lang,
        slider,
        bg = "bslider-bg-arc", thumb = "bslider-thumb-arc",
        valuearea = "slider-value-arc", textfield = "slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Arc.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                         thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            var cmbArcSlider = document.getElementById("fronttexteffect");
            var cmbSelectedvalue = cmbArcSlider.options[cmbArcSlider.selectedIndex].value;
			document.getElementById("bArcSlider").value = offsetFromStart+16;
           /* if (cmbSelectedvalue == 1) {
                //valnode.innerHTML = offsetFromStart;
                
            }
            else if (cmbSelectedvalue == 2) {
                //valnode.innerHTML = -offsetFromStart;
                document.getElementById("hArcSlider").value = -offsetFromStart;
            }*/

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });



        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
         Event_Arc.on("setSliders", "click", function(e) {
            slider.setValue(Number(document.getElementById("bArcSlider").value-16), false); //false here means to animate if possible
        });
    });
})();
<!----------------------------------------------------------------------------------------------------------------------------------->
(function() {

    var Event_Font = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "rslider-bg-font", thumb = "rslider-thumb-font",
                                valuearea = "slider-value-font", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Font.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }
        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);


            // Display the pixel value of the control

            document.getElementById("rFontSlider").value = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);
            //valnode.innerHTML = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);


            //document.getElementById("hSliderFontRealVal").value = offsetFromStart;
            // use the scale factor to convert the pixel offset into a real

            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;
        });
        //slider.setValue(Number(InitialValue));
        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });
        //document.getElementById("sliderVal");


        Event_Font.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("rFontSlider").value * 10 )-240), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Slider = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "rslider-bg1", thumb = "rslider-thumb1",
                                valuearea = "slider-value1", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Slider.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("rLetterSlider").value = offsetFromStart / 20 + 2;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event_Slider.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("rLetterSlider").value * 20 )-40), false); //false here means to animate if possible
        });
    });
})();




(function() {

    var Event_Outline = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "rslider-bg", thumb = "rslider-thumb",
                                valuearea = "slider-value", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Outline.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("rOutlineSlider").value = offsetFromStart / 20;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
       Event_Outline.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("rOutlineSlider").value * 20 )), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Arc = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        lang = YAHOO.lang,
        slider,
        bg = "rslider-bg-arc", thumb = "rslider-thumb-arc",
        valuearea = "slider-value-arc", textfield = "slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Arc.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                         thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            var cmbArcSlider = document.getElementById("fronttexteffect");
            var cmbSelectedvalue = cmbArcSlider.options[cmbArcSlider.selectedIndex].value;
			document.getElementById("rArcSlider").value = offsetFromStart+16;
           /* if (cmbSelectedvalue == 1) {
                //valnode.innerHTML = offsetFromStart;
                
            }
            else if (cmbSelectedvalue == 2) {
                //valnode.innerHTML = -offsetFromStart;
                document.getElementById("hArcSlider").value = -offsetFromStart;
            }*/

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });



        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
         Event_Arc.on("setSliders", "click", function(e) {
            slider.setValue(Number(document.getElementById("rArcSlider").value-16), false); //false here means to animate if possible
        });
    });
})();
<!----------------------------------------------------------------------------------------------------------------------------------->
(function() {

    var Event_Font = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "lslider-bg-font", thumb = "lslider-thumb-font",
                                valuearea = "slider-value-font", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Font.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }
        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);


            // Display the pixel value of the control

            document.getElementById("lFontSlider").value = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);
            //valnode.innerHTML = 24 + (offsetFromStart / 20) + (offsetFromStart / 20);


            //document.getElementById("hSliderFontRealVal").value = offsetFromStart;
            // use the scale factor to convert the pixel offset into a real

            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;
        });
        //slider.setValue(Number(InitialValue));
        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });
        //document.getElementById("sliderVal");


        Event_Font.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("lFontSlider").value * 10 )-240), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Slider = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "lslider-bg1", thumb = "lslider-thumb1",
                                valuearea = "slider-value1", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Slider.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("lLetterSlider").value = offsetFromStart / 20 + 2;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event_Slider.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("lLetterSlider").value * 20 )-40), false); //false here means to animate if possible
        });
    });
})();




(function() {

    var Event_Outline = YAHOO.util.Event,
                                Dom = YAHOO.util.Dom,
                                lang = YAHOO.lang,
                                slider,
                                bg = "lslider-bg", thumb = "lslider-thumb",
                                valuearea = "slider-value", textfield = "slider-converted-value"



    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Outline.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                                    thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            //valnode.innerHTML = offsetFromStart / 20;
            document.getElementById("lOutlineSlider").value = offsetFromStart / 20;
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });

        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
       Event_Outline.on("setSliders", "click", function(e) {
            slider.setValue(Number((document.getElementById("lOutlineSlider").value * 20 )), false); //false here means to animate if possible
        });
    });
})();


(function() {

    var Event_Arc = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        lang = YAHOO.lang,
        slider,
        bg = "lslider-bg-arc", thumb = "lslider-thumb-arc",
        valuearea = "slider-value-arc", textfield = "slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event_Arc.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                         thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            var cmbArcSlider = document.getElementById("fronttexteffect");
            var cmbSelectedvalue = cmbArcSlider.options[cmbArcSlider.selectedIndex].value;
			document.getElementById("lArcSlider").value = offsetFromStart+16;
           /* if (cmbSelectedvalue == 1) {
                //valnode.innerHTML = offsetFromStart;
                
            }
            else if (cmbSelectedvalue == 2) {
                //valnode.innerHTML = -offsetFromStart;
                document.getElementById("hArcSlider").value = -offsetFromStart;
            }*/

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
            YAHOO.log("slideStart fired", "warn");
        });



        slider.subscribe("slideEnd", function() {
            YAHOO.log("slideEnd fired", "warn");
        });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
         Event_Arc.on("setSliders", "click", function(e) {
            slider.setValue(Number(document.getElementById("lArcSlider").value-16), false); //false here means to animate if possible
        });
    });
})();