<script>
           <script>
        $(function () {
            $("#slider-range-min").slider({
                range:"min",
                value:0,
                min:0,
                max:100,
                step:10,
                slide:function (event, ui) {
                    $("#amount").val("$" + ui.value);
                }
            });
            $("#amount").val("$" + $("#slider-range-min").slider("value"));
        });
    </script>
    </script>

<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
            <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js" type="text/javascript"></script>
<STYLE>
    div.demo { padding: 110px !important; }
    </STYLE>

<SCRIPT>
    $(function() {
        $( "#slider" ).slider({
                range:"min",
                min:0,
                max:100,
                step:10,
                slide:function (event, ui) {
                    if(ui.value > 89){
                        $(this).slider({step:1})
                    }else {
                        $(this).slider({step:10})
                    }

                    $("#test").html("$" + ui.value);
                }


        });
    });
    </SCRIPT>

<DIV class=demo>
<DIV id=slider></DIV></DIV>
<div id="test"></div>