Building a custom rangeslider-component

Processing Coding Questions
1

Hi coders!

I’m trying to build a custom rangeslider and it drives me crazy. Most parts of the code work fine, but the function that updates the value of the slider when the mouse drags it returns slighty different values than expected.

For example: If i want it to control a value between 0 and 100 it returns values between 0 and 111.

Would be very cool to find a solution for this. Let me know if you have an idea how to fix it.

Thanks in advance!

Tim

RangeSlider S1;
float circleSize;

void setup() {
  size(600, 300); 


  float Slider1valueMin = 0;
  float Slider1valueMax = 300;
  float Slider1initialValue = 25;
  float Slider1layoutW = 200;
  float Slider1layoutH = 33;
  float Slider1layoutPosX = 22;
  float Slider1layoutPosY = 22;

  S1 = new RangeSlider(Slider1valueMin, Slider1valueMax, Slider1initialValue, Slider1layoutW, Slider1layoutH, Slider1layoutPosX, Slider1layoutPosY);
}

void draw() {
  background(#0000ff);
  noStroke();
  circleSize = S1.run(circleSize);

  ellipse(width-160, height/2, circleSize, circleSize);
}




class RangeSlider {

  PFont uiFont;

  /*
 =========================================
   VARIABLES
   =========================================
   */

  // Values 
  float valueMin;
  float valueMax;
  float initialValue;
  float value;

  // Layout
  float layoutW;
  float layoutH;  
  float layoutX;
  float layoutY;
  String label; 

  // Design
  color fg = #f1f1f1;
  color bg = #777777;
  color hover = #aaaaaa; 


  /*
 =========================================
   CONSTRUCTOR
   =========================================
   */

  // min
  // max
  // initial
  // layW
  // layH
  // layX
  // layY
  // fg
  // bg

  RangeSlider(float _valueMin, float _valueMax, float _initialValue, float _layoutW, float _layoutH, float _layoutX, float _layoutY) {
    valueMin = _valueMin;
    valueMax = _valueMax;
    initialValue = _initialValue;
    layoutW = _layoutW;
    layoutH = _layoutH;
    layoutX = _layoutX;
    layoutY = _layoutY;
    value = _initialValue;

    //uiFont = createFont("SpaceMono-Bold.ttf", 200);
  }



  /*
 =========================================
   CHECK IF THE MOUSE HOVERS THE SLIDER
   =========================================
   */

  // Diese Funtion wird innerhalb der Klasse ausgeführt

  boolean hover() {
    if (mouseX > layoutX && mouseX < layoutX+layoutW) {
      if (mouseY > layoutY  && mouseY < layoutY + layoutH) {
        return true;
      }
    }
    return false;
  }



  /*
 =========================================
   DISPLAY THE SLIDER
   =========================================
   */


  float run(float theVariableToChange) {

    // map the value to the position

    float position = map(value, valueMin, valueMax, 0, layoutW);


    // The track

    if (hover()) {
      fill(bg);
    } else {
      fill(hover);
    }

    //textFont(uiFont,16);

    pushMatrix();
    translate(layoutX, layoutY);
    rect(0, 0, layoutW, layoutH);
    fill(fg);

    textAlign(LEFT, TOP);
    text((int)value, 4, -2);

    rectMode(CORNER);
    rect(position - layoutH/2, 0, 15, layoutH);


    popMatrix();

    value = update();

    theVariableToChange = value;

    return theVariableToChange;
  }



  /*
 =========================================
   UPDATE THE SLIDER VALUE      
   
   DOWN HERE SEEMS TO BE THE BUG !!!
   DOWN HERE SEEMS TO BE THE BUG !!!
   DOWN HERE SEEMS TO BE THE BUG !!!
   
   
   =========================================
   */



  float update() {

    float newValue; 

    if (hover() && mousePressed) {
      //newValue = map(mouseX,0,width,valueMin,valueMax);
      newValue = map(mouseX, layoutX, layoutW, valueMin, valueMax);
      ;

      return(newValue);
    }
    newValue = value;
    return newValue;
  }
}
2

The problem is in update(). Try to create the slider with layoutX larger than layoutW and you might get a hint.

3

Perfect, that worked! Thanks!

1 Like
4

Great that you made it work @timrodenbroeker! :slight_smile:

Could you please share with us what was the problem and the solution? For the people who might read this topic later.