Custom Range

Custom range - a ready to use presets. Here you can download the source or bundled code.

Working demo

Features

• Easy to use
• Resposive and adaptive
• Easy to customize

Table of Contents

• Custom Range
  • Features
  • Table of Contents
  • Quick start
    • Install
      • Download
      • Include with <script>
        • CDN
    • Initialization
      • ES6
  • Methods
    • _init
    • _updateBarStateOnResize
      • Params
    • _init
    • _createWrapper
    • _calcActiveBarSize
      • Params
    • _init
    • _createWrapper
    • _calcLeftHandlersPosition
    • _calcRightHandlersPosition
    • _updateBarStateOnResize
      • Params
    • _updateBarStateOnResize
      • Params

Quick start

Install

Download

Download minified or not compressed bundle

Include with <script>

Download and install with script.

Minified:

<!-- if you need the single range -->
<link rel="stylesheet" href="./range.min.css" />
<!-- if you need the multi-range -->
<link rel="stylesheet" href="./multi-range.min.css" />

<script src="range.min.js"></script>

Not compressed:

<!-- if you need the single range -->
<link rel="stylesheet" href="./range.css" />
<!-- if you need the multi-range -->
<link rel="stylesheet" href="./multi-range.css" />

<script src="range.js"></script>

CDN

Currently not supported

Initialization

ES6

import SingleRange from "./directory-name";

const range = new SingleRange(document.querySelector(".js-range"));

const range1 = new MultiRange(
  document.querySelector(".js-multi-range-left"),
  document.querySelector(".js-multi-range-right")
);

Methods

_init

Initialization service

Source code

---

_updateBarStateOnResize

Used for update range controls position on resize

Params

• type
• Type: string
• Description: Js event
• name
• Type: string
• Description: Custom event name
• obj
• Type: object
• Description: Element which call the event. Default: window

Source code

---

_init

Initialization method of the single range

Source code

---

_createWrapper

Used for the move input into wrapper

Source code

---

_calcActiveBarSize

Used for get actual active bar size.

Native active bar is hidden by ShadowDOM

Params

• value
• Type: number,string
• Description: Input current value

Source code

---

_init

Initialization method of the multi-range

Source code

---

_createWrapper

Used for the move input's into wrapper

Source code

---

_calcLeftHandlersPosition

Used for get actual left thumb position and active bar start.

Source code

---

_calcRightHandlersPosition

Used for get actual right thumb position and active bar end.

Source code

---

_updateBarStateOnResize

Used for update range controls position on resize

Params

• type
• Type: string
• Description: Js event
• name
• Type: string
• Description: Custom event name
• obj
• Type: object
• Description: Element which call the event. Default: window

Source code

---

_updateBarStateOnResize

Used for update range controls position on resize

Params

• type
• Type: string
• Description: Js event
• name
• Type: string
• Description: Custom event name
• obj
• Type: object
• Description: Element which call the event. Default: window

Source code

---

© marcusblanco (Danil Duganov)