JSFiddle - React, Tailwind, and code Playground

by gorillawit

CSS

/* ProgressBar.css */
.vertical-slider.onyx-progress-bar {
  position: relative;
  margin: 8px;
  height: 400px;
  width: 8px;
  border: 1px solid rgba(15, 15, 15, 0.2);
  border-radius: 3px;
  background: #b8b8b8 url(./../images/gradient-invert.png) repeat-x;
  background-size: auto 100%;
}
.vertical-slider .onyx-progress-bar-bar {
  width: 100%;
  border-radius: 3px;
  background: #58abef url(./../images/gradient.png) repeat-x;
  background-size: auto 100%;
  position: absolute;
}

JavaScript

enyo.kind({
    name: "VerticalSlider",
    kind: "onyx.Slider",
    classes: "vertical-slider",
    dragstart: function(inSender, inEvent) {
        if (inEvent.vertical) {
            inEvent.preventDefault();
            this.dragging = true;
            return true;
        }
    },
//    valueChanged: function() {
//        this.value = this.clampValue(this.min, this.max, this.value);
//        var p = this.calcPercent(this.value);
//        this.updateKnobPosition(p/64);
//        if (this.lockBar) {
//            this.setProgress(this.value);
//        }
//    },
    updateBarPosition: function(inPercent) {
        this.$.bar.applyStyle("top", (100-inPercent) + "%");
        this.$.bar.applyStyle("height", inPercent + "%");
    },
    updateKnobPosition: function(inPercent) {
        this.$.knob.applyStyle("top", (100-inPercent) + "%");
    },
    calcKnobPosition: function(inEvent) {
        var y = inEvent.clientY - this.hasNode().getBoundingClientRect().top;
        return this.max - (y / this.getBounds().height) * (this.max - this.min);
    }
});

enyo.kind({
    name: "App",
    components: [
        { name: "vert", kind: "VerticalSlider", value: 30 }
    ]
});

new App().renderInto(document.body);