jquery rangeslider 사용법-프런트엔드 Q&A-php.cn

jquery rangeslider 사용법

王林

풀어 주다： 2023-05-28 15:49:08

원래의

484명이 탐색했습니다.

jQuery Rangeslider는 드래그 가능한 슬라이더 컨트롤을 쉽게 만들 수 있는 jQuery 기반 플러그인입니다. 이 글에서는 jQuery Rangeslider를 사용하는 방법을 보여드리겠습니다.

jQuery Rangeslider 설치

jQuery Rangeslider는 다음과 같은 다양한 방법으로 설치할 수 있습니다.

CDN 링크를 통해 소개

CDN 링크를 추가하면 jQuery Rangeslider를 얻을 수 있습니다. 가장 쉬운 설치 방법은 다음과 같습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

로그인 후 복사

NPM을 통해 설치

NPM을 통해 jQuery Rangeslider를 설치할 수도 있습니다. 터미널에서 다음 명령을 실행합니다.

npm install rangeslider.js

로그인 후 복사

그런 다음 HTML 파일에 다음 코드를 추가합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="./node_modules/rangeslider.js/dist/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/rangeslider.js/dist/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider();
    });
  </script>
</body>
</html>

로그인 후 복사

Using jQuery Rangeslider

설치가 완료되면 jQuery Rangeslider를 사용할 수 있습니다. 사용 예는 다음과 같습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Rangeslider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
</head>
<body>
  <input type="range" min="0" max="100" value="50" id="myRange">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myRange').rangeslider({
        polyfill: false,
        onSlide: function(position, value) {
          console.log('position: ' + position, ' value: ' + value);
        }
      });
    });
  </script>
</body>
</html>

로그인 후 복사

이 예는 jQuery Rangeslider를 사용하여 드래그 가능한 입력 슬라이더 컨트롤을 웹 페이지에 추가하는 방법을 보여줍니다.

코드에서는 먼저 필요한 CSS 및 JavaScript 파일을 소개합니다.

그런 다음 HTML 입력 상자 요소에 type="range" 속성을 추가하면 웹 페이지에 슬라이더 컨트롤이 생성됩니다.

그런 다음 jQuery 선택기를 사용하여 입력 상자를 선택하고 rangeslider() 메서드를 호출하여 드래그 가능한 슬라이더 컨트롤로 변환합니다.

rangeslider() 메서드를 호출할 때 다음과 같은 몇 가지 매개변수도 전달했습니다.

polyfill: false. 이 매개변수는 jQuery Rangeslider가 폴리필 기능을 사용하지 않도록 지시합니다. Polyfill은 HTML5 슬라이더 컨트롤을 지원하지 않는 이전 브라우저에서 JavaScript를 사용하여 이 기능을 활성화합니다. 그러나 최신 브라우저에서는 이 폴리필 기능이 거의 사용되지 않습니다. 따라서 이 매개변수를 false로 설정했습니다.
onSlide: 함수(위치, 값) {...}. 이 매개변수는 슬라이더 컨트롤 위로 슬라이드할 때 어떤 일이 발생하는지 jQuery Rangeslider에 알려줍니다. 이 예에서는 스와이프할 때마다 호출되는 함수를 정의합니다. 이 함수는 슬라이더의 위치와 현재 값이라는 두 가지 매개변수를 허용합니다. 이 함수의 출력을 콘솔에서 볼 수 있도록 이 함수를 콘솔에 출력합니다.

요약

jQuery Rangeslider는 드래그 가능한 입력 슬라이더 컨트롤을 웹 페이지에 쉽게 추가할 수 있는 매우 실용적인 jQuery 플러그인입니다. 이 기사에서는 jQuery Rangeslider를 설치하는 방법과 이를 사용하여 슬라이더 컨트롤을 만들고 일부 매개 변수를 전달하여 사용자 정의하는 방법을 보여주었습니다. 이 기사가 jQuery Rangeslider를 빠르게 시작하는 데 도움이 되기를 바랍니다.

위 내용은 jquery rangeslider 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!