script.js

var canvas;
var handleVal;
var isClicked = false;
//var clock;


// Class Definition
var UiHandle = function (startX, startY, width, height){
  this.x = startX;
  this.y = startY;
  //this.handleVal = ;  
  this.width = width;
  this.height = height;
  this.isClicked = false;
  this.getClick = getClicked;
  this.col = color(175, 175, 175);

  fill(this.col);
  rect(this.x, this.y, this.width, this.height);
}

function getClicked(){
  // Determining if click is inside handle dimensions
  if(mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height && mouseIsPressed){
    this.isClicked = true;
    this.col = color(255, 25, 25);
    console.log("Condition 1: " + this.isClicked);
  } else {
    this.isClicked = false;
    this.col = color(175, 175, 175);
    console.log("Condition 2: " + this.isClicked);
  }
  return this.isClicked;
  return this.col;
}

function setup() {
  canvas = createCanvas(400, 200);
}

function draw() {
  background(255);
  ellipse(canvas.width/2, canvas.height/4, 25, 25);
  //clock = document.getElementById('clock').setInnerHTML(mouseX);
  line(50, 100, 350, 100);
  
  // Instantiating handle object 
  var handle = new UiHandle(50,87,25,25);
  handle.getClick();
  //console.log(handle.isClicked);
  
  // If handle is clicked and moved, update handle location and color
  if (isClicked === true){
    handle.x = mouseX;
    handle.col = (255, 25, 25);
    //handle.isClicked();
  }
}  

There were a few issues here. You were calling your constructor function in the draw loop, so it was resetting everything every frame. You need to use the "prototype" pattern to add functions to your handle object. I cleaned it up a little. But, you might consider NOT using this at all, because html has a built in slider tool that you should be able to style pretty well. <input type="range">

this should work better

var canvas;
var handleVal;
var isClicked = false;
//var clock;
var handle;

// Class Definition
var UiHandle = function (startX, startY, width, height){
  this.x = startX;
  this.y = startY;
  //this.handleVal = ;  
  this.width = width;
  this.height = height;
  this.isClicked = false;
  this.col = color(175, 175, 175);
}

UiHandle.prototype.display = function() {
    fill(this.col);
  rect(this.x, this.y, this.width, this.height);
}

UiHandle.prototype.getClick = function(){
  // Determining if click is inside handle dimensions
  if(mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height && mouseIsPressed){
    this.isClicked = true;
    this.col = color(255, 25, 25);
    console.log("Condition 1: " + this.isClicked);
  } else {
    this.isClicked = false;
    this.col = color(175, 175, 175);
    console.log("Condition 2: " + this.isClicked);
  }
  return this.isClicked;
  //return this.col;
}

function setup() {
  canvas = createCanvas(400, 200);
  handle = new UiHandle(50,87,25,25);
}

function draw() {
  background(255);
  ellipse(canvas.width/2, canvas.height/4, 25, 25);
  //clock = document.getElementById('clock').setInnerHTML(mouseX);
  line(50, 100, 350, 100);

  // Instantiating handle object 
  handle.display();
  handle.getClick();
  //console.log(handle.isClicked);

  // If handle is clicked and moved, update handle location and color
  if (handle.isClicked === true){
    handle.x = mouseX - handle.width/2;
    handle.col = (255, 25, 25);
    //handle.isClicked();
  }
}