How to make slider from p5 work with webpack?

Question

I am using p5.js library with webpack and it works just fine. However when I try to import createSlider from p5.dom it fails

import p5 from "./p5";
import * as dom from './addons/p5.dom'
import {createSlider} from './addons/p5.dom'


const s = (p) => {
    p.setup = function () {
        p.createCanvas(200,200);
        slider = createSlider(0, 360, 60, 40);
        slider.position(10, 10);
        slider.style('width', '80px');
    };

};

let myp5 = new p5(s, 'p5cont');

I tried with dom.createSlider() with no success. In both cases the console reports createSlider is not a function. What's wrong?

ffmaer · Answer 1 · 2020-08-20T18:29:03.180

As of the latest p5.js (v1.1.9 at the time of writing), p5.dom is a part of the main p5.js library. In other words, you don't need to import p5.dom separately to use createSlider().

The following code makes p5's slider work with webpack.

import p5 from "./p5.min.js"

let sketch = function(p){
    p.setup=function(){
        p.createCanvas(500,500)
        p.background('blue')
        p.createSlider(0,100)
    }
}

let myp5 = new p5(sketch)

How to make slider from p5 work with webpack?

1 Answers1