Javascript 在jQuery UISlider加载时显示默认值

我不知道如何着手做以下几点：

显示加载时的默认项。当前，它加载一个空白页，仅当我拖动滑块时才显示数据

加载项目时显示淡入效果

这是HTML

<div class="sli3"></div>
<div class="div-0">
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</div>

JS:

$（函数（）{
$（“.sli3”）.滑块({
动画：对，
射程：“分钟”，
数值：10，
分:0,，
最高：100，
幻灯片：功能（事件、用户界面）{
如果（ui.value=21&&ui.value=50&&ui.value=70&&ui.value对代码进行一些更改：

$(function() {
    $(".sli3").slider({
        animate: true,
        range: "min",
        min: 0,
        max: 100,
        slide: onSlide,
        change: onSlide
    }).slider('value', 10);
});

（我取出了
幻灯片
函数，以便在更改和幻灯片时调用它）

检查演示的更新：

太好了。谢谢。有关于淡入效果的任何消息吗？欢迎：）将感谢您对答案进行投票。关于淡入-为了做到这一点，您需要两个具有不同内容的div并淡出/淡入。
$(function() {
    $(".sli3").slider({
            animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            if (ui.value<=20) {
               $(".div-1").text("whatever");
               $(".div-2").html("hello <strong>world</strong>");
               $(".div-3").text("");
            }
            else if (ui.value>=21 && ui.value<50) {
               $(".div-1").text("yay");
               $(".div-2").text("whoo");
               $(".div-3").text("");
            }
            else if (ui.value>=50 && ui.value<70) {
               $(".div-1").text("star");
               $(".div-2").text("wars");
               $(".div-3").text("");
            }
            else if (ui.value>=70 && ui.value<90) {
               $(".div-1").text("night");
               $(".div-2").text("crawler");
               $(".div-3").text("rocks");
            }
            else {
               $(".div-1").text("example text 1");
               $(".div-2").text("example text 2");
               $(".div-3").text("");
            }
        }
    });
});

$(function() {
    $(".sli3").slider({
        animate: true,
        range: "min",
        min: 0,
        max: 100,
        slide: onSlide,
        change: onSlide
    }).slider('value', 10);
});