CSSを使用してスライドバーをカスタマイズする方法

Question

htmlページの上部に表示されるスライダーを作成しましたが、下部に表示する必要があります。また、水平スライドバー をサイズの半分に縮小したい値を（0-100）から（最小：1-max：25）に制限してください。 私はCSSに新しく、これを行う方法がわかりません。誰かが私に助けてくれます。私は完全なコードもアップロードしました。

$(function() { 
 
    var handle = $("#custom-handle"); 
 
    $("#slider").slider({ 
 
    create: function() { 
 
     handle.text($(this).slider("value")); 
 
    }, 
 
    slide: function(event, ui) { 
 
     handle.text(ui.value); 
 
    } 
 
    }); 
 
});

#custom-handle { 
 
    width: 3em; 
 
    height: 1.6em; 
 
    top: 50%; 
 
    margin-top: -.8em; 
 
    text-align: center; 
 
    line-height: 1.6em; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="slider"> 
 
    <div id="custom-handle" class="ui-slider-handle"></div> 
 
</div>

Answer 1

スライダーの最小値と最大値を設定するには、あなたがこれを行うになります。

#slider { 
    width:50%; /*make it half its width*/ 
    position:absolute; /*allow you to position it at the bottom*/ 
    bottom:20px; /*how far from the bottom*/ 
    left:20px; /* how far from the left*/ 
} 

：CSSのため

$(function() { 
    var handle = $("#custom-handle"); 
    $("#slider").slider({ 
    min: 1,    //<--------Min 
    max: 25,    //<-------Max 
create: function() { 
    handle.text($(this).slider("value")); 
}, 
slide: function(event, ui) { 
    handle.text(ui.value); 
} 
    }); 
}); 

を、あなたはこのようにそれを置くことができ

デモ：https://jsfiddle.net/3t0s597v/

Answer 2

ここには、必要なものすべてがあります。

$(function() { 
 
    var handle = $("#custom-handle"); 
 
    $("#slider").slider({ 
 
min: 1, 
 
max: 25, 
 
    create: function() { 
 
     handle.text($(this).slider("value")) 
 
    }, 
 
    slide: function(event, ui) { 
 
     handle.text(ui.value); 
 
    } 
 
    }); 
 
});

#custom-handle { 
 
    width: 3em; 
 
    height: 1.6em; 
 
    top: 50%; 
 
    margin-top: -.8em; 
 
    text-align: center; 
 
    line-height: 1.6em; 
 
} 
 

 
#slider { 
 
    width: 50%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="slider"> 
 
    <div id="custom-handle" class="ui-slider-handle"></div> 
 
</div>