Arrow generator

This is a simple arrow generator.

by Avdhut Sonpethkar

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="test">
    <div id="radio_container">
            <div id="input_caption">Arrow Size: <input type="text"  name="arrow_size" size="2" />px</div>
        <div id="input_caption">Arrow Side</div>
        <div id="input_radio">
            <input type="radio" value="top" name="arrow_side" />Top</div>
        <div id="input_radio">
            <input type="radio" value="right" name="arrow_side" />Right</div>
        <div id="input_radio">
            <input type="radio" value="bottom" name="arrow_side" />Bottom</div>
        <div id="input_radio">
            <input type="radio" value="left" name="arrow_side" />Left</div>
<div id="red"></div>        
    </div>

    <br style="line-height: 150px;" />
    <div id="arrow_div">This sample for Arrow</div>
    <br style="line-height: 150px;" />
    <div class="arrow_box">This sample for Arrow</div>
</div>

CSS

#radio_container {
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
    background-color: #FFFFFF;
    display: block;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid;
    box-shadow: 0 0 9px black;
    -moz-box-shadow: 0 0 9px black;
    -webkit-box-shadow: 0 0 9px black;
}
#radio_container #input_caption {
    display: block;
    padding: 5px;
    text-decoration: underline;
}
#radio_container #input_radio {
    display: inline;
    padding-right: 5px;
}
#arrow_div {
    font:italic bold 12px/30px Georgia, serif;
    border: 2px solid #2CDF7B;
    box-shadow: 0 0 9px black;
    -moz-box-shadow: 0 0 9px black;
    -webkit-box-shadow: 0 0 9px black;
    width: 100px;
    height: 100px;
    background-color: white;
    display:block;
    margin-left: 150px;
    position: relative;
}
#arrow_div:before, #arrow_div:after {
    content:" ";
    border: solid transparent;
    margin: 0px;
    padding: 0px;
    position: absolute;
    bottom: 100%;
    pointer-events: none;
}
#arrow_div:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #FFFFFF;
    border-width: 5px;
    left:5%;
    margin-left: -5px;
}
#arrow_div:before {
    border-color: rgba(44, 223, 123, 0);
    border-bottom-color: #2CDF7B;
    border-width: 11px;
    left: 5%;
    margin-left: -11px;
}

#red {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
}

#red .ui-slider-range {
    background: #ef2929;
}
#red .ui-slider-handle {
    border-color: #ef2929;
}

JavaScript

jQuery(document).ready(function() {
$( "#red" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,


});

});