schieberegler mit einer werte range

[agent007]

wie erstelle ich einen schieberegler mit einer range. zb einen anfangswert von Wert x bis wert y.

ich habe schon einen mit 0-100%. da habe ich das so gemacht:

wert = Math.round(slider._x/ dif * 100) 

slider._x ist dabei der die pos x des reglers der verschoben werden kann und dif ist der der abstand zwischen dem min und dem max wert den der slider haben kann.

jetzt brauch ich aber das gleiche für eine range von 2 werten, kann mir da jmd einen ansatz geben?

danke und grüße

[romän]

Hi,

versuch's mal damit:

var dif  = 100;
var minValue    = 10;
var maxValue    = 50;
var wert = Math.round(slider._x / dif * (maxValue - minValue)) + minValue; 

gruß,
roman

[agent007]

das schaut doch echt ganz gut aus.
danke!

[agent007]

hi, jetzt habe ich doch nochmal eine frage:

function test()
{
var dif  = 200;
var minValue    = 0;
var maxValue    = 300;
var wert = Math.round(slider._x / dif * (maxValue - minValue)) + minValue;
} 

ich beweg den slider bei einem klick auf den pfeilbutton links um += 1 px oder rechts um -= 1px
und rufe dann die funktion zb. "test" auf. die werte werden ja aufgerundet, daher bekomm ich nie wertsprünge von 1 so wie ich das gerne hätte. (also 0 - 300 und bei jedem klick eine wert um 1 höher)

hat jmd eine idee?

grüße

[romän]

Hi,

benutz' am besten zwei Funktionen.
1) Um den Wert aus der Slider-Position zu berechnen.
2) Um die Slider-Position aus dem Wert zu berechnen.

// Variablen zur Slider-Initialisierung
var dif = 200; // Slider-Länge in Pixeln
var minValue = 0; // kleinster möglicher Wert des Sliders
var maxValue = 300; // größter möglicher Wert des Sliders
var sliderValue = 0; // aktueller Wert des Sliders
 
// 1) Berechnet den Wert aus der Slider-Position
function setSliderPosition(x){
slider._x = Math.round(Math.max(0, Math.min(dif, x)));
sliderValue = Math.round(slider._x / dif * (maxValue - minValue)) + minValue;
}
 
// 2) Berechnet die Slider-Position aus dem Wert
function setSliderValue(val){
sliderValue = Math.round(Math.max(minValue, Math.min(maxValue, val)));
slider._x = Math.round(sliderValue * dif / (maxValue - minValue)) - minValue;
} 

Um den Wert des Sliders um 1 zu erhöhen rufst du dann einfach

setSliderValue(sliderValue + 1); 

auf.
Dadurch wird der neue Wert gesetzt, und der Slider direkt verschoben.
Außerdem sorgen beide Funktionen dafür, dass die übergebenen Werte im gültigen Bereich gehalten werden.

gruß,
roman

[agent007]

klappt super danke.

[agent007]

jetzt will ich aber noch einen drauf setzten

habe jetzt 2 eingabefelder drunter, das man zb bei einem regler von 0-100%
eingeben kann.

eingabe_1.onChanged = function()
{
    setSliderValue(wert_1);
}
eingabe_2.onChanged = function()
{
    setSliderValue(wert_2);
} 

wobei zb. wert_1 der wert ist den man in das eingabefeld eingibt.

bei eingabe_1 geht das ja noch aber bei eingabe_2 haut das ja nicht mehr hin!

weil ich ja wenn ich eingabe_2 60 eingebe, dann sollte der setSliderValue(40) aufrufen oder?

aber so geht es auch net ;(

eingabe_2.onChanged = function()
{
    setSliderValue(100 - wert_1);
} 

was mach ich da falsch?

[romän]

Hi,

du meinst ja sowas:

Zitat von agent007 (pm)

zb Frage:
Wo geht ihr lieber aus?

< ------X--------------------------- >
Disco Bar
20% 80%

Dann müsste eingabe_2 diesen onChanged-Handler haben:

eingabe_2.onChanged = function(){
setSliderValue(100 - wert_2);
} 

Außerdem solltest du vielleicht noch wert_1 direkt ändern, wenn wert_2 geändert wird, und umgekehrt. Sinnvoll wäre es auch die Eingabefelder auf max. 3 Zahlen zu beschränken und zu prüfen, ob der eingegebene Wert überhaupt eine Zahl ist, oder evtl. größer als 100? ...

Hier mal etwas Code für eingabe_2:

//beschränkt die Eingabemöglichkeit auf Zahlen
eingabe_2.restrict = "0-9";
// erlaubt max. 3 Zeichen
eingabe_2.maxChars = 3;
eingabe_2.onChanged = function(){
// wert_2 ist ein String -> in Zahl konvertieren
var zahl = parseInt(wert_2);
// wenn wert_2 in eine Zahl umgewandelt werden konnte, dann...
if(!isNaN(zahl)){
// wenn > als 100 dann zurück auf 100 setzen
if(zahl > 100) zahl = wert_2 = 100;
setSliderValue(100 - zahl);
// wert_1 entsprechend anpassen
wert_1 = 100 - zahl;
}
}; 

Code für eingabe_1 ist identisch außer setSliderValue(zahl).

gruß,
roman

[agent007]

nochmal ein ganz GROSSES DANKE!
So jetzt nerv ich nicht mehr...aber ich bin um einiges schlauer

[agent007]

Zitat von romän

Hi,

benutz' am besten zwei Funktionen.
1) Um den Wert aus der Slider-Position zu berechnen.
2) Um die Slider-Position aus dem Wert zu berechnen.

// Variablen zur Slider-Initialisierung
var dif = 200; // Slider-Länge in Pixeln
var minValue = 0; // kleinster möglicher Wert des Sliders
var maxValue = 300; // größter möglicher Wert des Sliders
var sliderValue = 0; // aktueller Wert des Sliders
 
// 1) Berechnet den Wert aus der Slider-Position
function setSliderPosition(x){
slider._x = Math.round(Math.max(0, Math.min(dif, x)));
sliderValue = Math.round(slider._x / dif * (maxValue - minValue)) + minValue;
}
 
// 2) Berechnet die Slider-Position aus dem Wert
function setSliderValue(val){
sliderValue = Math.round(Math.max(minValue, Math.min(maxValue, val)));
slider._x = Math.round(sliderValue * dif / (maxValue - minValue)) - minValue;
} 

Um den Wert des Sliders um 1 zu erhöhen rufst du dann einfach

setSliderValue(sliderValue + 1); 

auf.
Dadurch wird der neue Wert gesetzt, und der Slider direkt verschoben.
Außerdem sorgen beide Funktionen dafür, dass die übergebenen Werte im gültigen Bereich gehalten werden.

gruß,
roman

funkt aber nicht mit minValue = 100 und maxValue = 300 oder? zumindest die setSliderValue Function!!

[agent007]

wenn es interessiert, so geht es

slider._x = Math.round((sliderValue - minValue) * dif / (maxValue - minValue));