Control deslizante de rango personalizado suave con JavaScript puro-rangeslide. js

Vista prévia

Descripción

rangeslide. js es un plugin de JavaScript ligero pero robusto que le ayuda a renderizar deslizadores de rango dinámicos y suaves con etiquetas personalizadas, garrapatas y pulgares.

Funcionamiento

Cargue los siguientes archivos JavaScript y CSS en su archivo HTML.

<link rel="stylesheet" href="rangeslide.css">
<script src="rangeslide.js"></script>

Defina sus propios datos en una matriz JS para el control deslizante de rango.

var myData = [


{ name: "2016", item: "This is some sample text associated with first item." },


{ name: "2017", item: "This is some sample text associated with second item." },


{ name: "2018", item: "This is some sample text associated with third item. It was returned from a function." },


{ name: "2019", item: function() { return "This is some sample text associated with fourth item. It was also returned from a function."; } },


{ name: "2020", item: "This is some sample text associated with fifth item." },


{ name: "2021", item: "This is some sample text associated with sixth item." },


{ name: "2022", item: "This is some sample text associated with the last item." }
];

Cree un elemento de marcador de posición para el control deslizante de rango.

<div id="rangeslide-demo" class="rangeslide"></div>

Represente un control deslizante de rango predeterminado dentro del elemento DIV.

var myRangeSlider = rangeslide("#rangeslide-demo", {


data: myData
});

Todas las opciones posibles para personalizar el control deslizante de rango.

var myRangeSlider = rangeslide("#rangeslide-demo", {


autoPlay: false,


autoPlayDelay: 1000,


data: [],


enableLabelClick: true,


enableMarkerClick: true,


enableTrackClick: true,


handlers: [],


highlightSelectedLabels: false,


labelsPosition: "below",


labelsWidth: 60,


leftLabel: "",


loop: true,


markerSize: 14,


rightLabel: "",


showLabels: false,


sideLabelsWidth: 40,


showTrackMarkersProgress: false,


showTicks: true,


showTrackMarkers: false,


showTrackProgress: false,


showValue: false,


startAlternateLabelsFromTop: false,


startPosition: 0,


stepSize: 1,


thumbHeight: 16,


thumbWidth: 16,


tickHeight: 16,


trackHeight: 7,


valueIndicatorOffset: 5,


valueIndicatorWidth: 30,


valueIndicatorHeight: 30,


valuePosition: "thumb",


valueSource: "index"
});

Controladores de eventos.

var myRangeSlider = rangeslide("#rangeslide-demo", {


handlers: {




// Fires after slider value is changed



 // Arguments: dataItem, rangeslideElement



valueChanged: null,




 // Fires when auto play is started dataItem, rangeslideElement



// Arguments: dataItem, rangeslideElement



playStart: null,




// Fires when auto play is stopped



// Arguments: dataItem, rangeslideElement



playStop: null,




// Fires when auto play loop is complete



// Arguments: rangeslideElement



playLoopFinished: null,




// Fires after slider is initialized



// Arguments: rangeslideElement



initialized: null,




// Fires after slider is refreshed



// Arguments: rangeslideElement



refreshed: null,




// Fires after slider track is clicked



 // Arguments: dataItem, trackElement



trackClicked: null,




// Fires after label is clicked




// Arguments: dataItem, labelElement



labelClicked: null,




// Fires after track marker is clicked



 // Arguments: dataItem, markerElement



markerClicked: null,




// Fires when thumb dragging is initiated




// Arguments: dataItem, thumbElement



thumbDragStart: null,




// Fires when thumb is being dragged



 // Arguments: dataItem, thumbElement



thumbDragged: null,




// Fires when thumb is dropped



 // Arguments: dataItem, thumbElement



thumbDraggedEnd: null






}
});