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

이 할 것 슬라이더의 최소 및 최대 설정하려면 다음과 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); 
} 
    }); 
}); 

을, 당신은 이런 식으로 위치 수 :

#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*/ 
} 

데모 : 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>