IonRangeSlider Weisen Sie den Werten Werte zu

Question

Ich verwende ionRangeSlider und ich möchte Beschriftungen Werte zuweisen oder umgekehrt.

So kann der Benutzer wählen Entfernung vom Strand mit Optionen: 'on beach', '100m', '200m', '300m', 'more than 300m' aber ich brauche in post Werte wie '0', '100', '200', '300', 999

Mein init:

$("#idSelector").ionRangeSlider({ 
    ... 
    values_separator: " to ", 
    values: [ 
     'on beach', '100m', '200m', '300m', 'more than 300m' 
    ], 
    ... 

Gibt es eine Möglichkeit, es zu tun? (für die Verwendung von ionRangeSlider, weil Werte erhalten und parse sie kann ich auf meinem Weg)

Ich versuchte Set min und max Optionen für ionRangeSlider, aber es funktioniert nicht.

Irgendwelche Ideen?

Answer 1

es recht einfach getan werden könnte. Sehen Sie sich diese Demo:

http://jsfiddle.net/IonDen/bvbvr0xs/

var $range = $(".js-range-slider"); 
var $result = $(".js-result"); 

var values = [0, 100, 200, 300, 999]; 
var values_p = ["on the beach", "100m", "200m", "300m", "more then 300m"]; 

$range.ionRangeSlider({ 
    type: "single", 
    grid: true, 
    values: values, 
    prettify: function (n) { 
     var ind = values.indexOf(n); 
     return values_p[ind]; 
    }, 
    onStart: function(data) { 
     $result.text(data.from_value); 
    }, 
    onChange: function(data) { 
     $result.text(data.from_value); 
    } 
}); 

Answer 2

Die Werte für den Schieberegler sind anders als die Etiketten - die Etiketten sind nur für den Benutzer.

Sie wollen, dass der Minimalwert 0 zu sein, und der max 400 (400 Ihr mehr als 300-Wert) sein und einen Schritt von 100 für die dies werden Sie gewünschte Schieber Werte

Jetzt Etiketten. Sie müssen vom Schieberegler getrennt sein - erstellen Sie jedes Etikett in einem p-Element, das in einem div-Element eingeschlossen ist. Geben Sie den absoluten Werten der p-Elemente jeweils einen linken css-Wert.

So:

<div id='labels' style='position:relative; width:100%'> 
    <p style='position:absolute;left:0'>on beach</p> 
    <p style='position:absolute;left:25%'>100m</p> 
    <p style='position:absolute;left:50%'>200m</p> 
    <p style='position:absolute;left:75%'>300m</p> 
    <p style='position:absolute;left:100%'>more than 300m</p> 
</div> 

Sie müssen möglicherweise Etiketten geben eine feste Breite