31:T7f4,md`## What are they A restricted boltzmann machine is a graph-based model that takes as input an array binary values (such as presence of different ingredients in a recipe) and then spits out a new array of binary values after attempting to reconstruct the original array. Seems rather boring until you realize that in the process of reconstructing the original input they must encode the data into a set of hidden nodes that have a lower dimensionality than the input. This means they can't just learn the identity function but must discover some latent structure in your data, map your data to this latent structure then use info about that latent structure to guess at the input again. Those of you who are familiar with neural networks may be saying 'that just sounds like an autoencoder,' which is totally right and infact RBMs were really the precursors to modern autoencoders. There are two main differences though, the first being the RBM must use the same weights that mapped into the latent state to map back out to its reconstruction, whereas an autoencoder can learn entirely seperate weights from its latent representation to the reconstruction. The second difference is that RBMs are probabilistic, meaning that the internal and reconstruction nodes are 'turned on' with a probability instead of being a deterministic function of the weights. _A couple things to note. First, we are not limited to binary input vectors for RBMs but the simplest form uses them. Theoretically any exponential-family distributed data would work. Second, it is entirely possible to make probabilistic autoencoders too. This is what a variational autoencoder is and they work great._ --- ## What do they look like? What is a graph-based model? It is a model where you can think of the components as nodes that hold some value and edges that define weights that those values are multiplied by on their way to the other end of the edge. A simple RBM with five visible (or input) nodes and two hidden nodes can be represented as follows. `32:T446,texmd`So if you expand the returned object you see \`weights\` is an array of objects containing the visible node index, the hidden node index, and the randomly initialize value for the edge weight. _Note there is also a bias term added into the weights._ Next the visible and hidden nodes arrays look the same, containing the \`energy\` or the result of the linear sum of weights with corresponding node values and \`activation\` which is the result of the bernouli random sample corresponding to $\\sigma(\\text{energy})$. These are both initialized to zero to start. ### Calculating energies and activations Next we define a function that takes an RBM object from out \`setup_rbm\` function a direction (from visible nodes to hidden or from hidden to visible) and an input (data observation for the visible $\\to$ hidden case or hidden activations for the hidden $\\to$ visible case.) It then multiplies its input by the weights entering the destination layer, finds the energy, probability of activation and finally samples from a bernouli distribution to see if the node is turned on. `33:T7b4,texmd`Compare the activations on the visible nodes to the true input values from above? (Note this is entirely stochastic so if you rerun any of these blocks you will get a different result most likely) In all likelihood the RBM made a mistake and the visible nodes activations look pretty different from the fed input. This makes sense as it's just using randomly generated weights to do its mapping. Now we get to train the model to do better! ## Down the gradient we go Luckily since the RBM is such a simple model of linear combinations of weights and binary values followed by a nice easily diferentiable activation function (the sigmoid) the actual gradient is rather easy to construct. I won't bore you with the derivation but the rule for updating a given weight, say we've just fed an observation $X$ to the RBM and we want the gradient with respect to the weight between visible node $V_i$ and hidden node $H_j$: $W_{ij}$: $$\\frac{\\partial C}{\\partial W_{ij}} = (I_{(X_i = H_j)} - I_{(V_i = H_j)})$$ Crazy, right? In english this is saying that the on the weight is 1 if the input and hidden match eachother but the reconstruction and the hidden don't match, 0 (aka 'you're doing good') if both the input and reconstruction match the hidden) and -1 if the input doesn't match the hidden but the reconstruction does. In even simpler english: if the nodes activated together and did well no need to move, if there was a mismatch in activations, move the weight. Now we can build our update rule from this easily. Assuming a learning rate of $\\lambda$ we can update the weight with the formula: $$W_{ij}^{\\text{new}} = W_{ij} + \\lambda(I_{(X_i = H_j)} - I_{(V_i = H_j)}).$$ Beautiful, to implement this we need a function that will take our RBM in its current state, pass an observation to it, propigate into the hidden and back to the visible like we did above, then another one to check these node aggreements and update the weights acordingly. `34:T408,md` ## What can we do with this? Besides changing the input structure to be not limited to the binary case, a common thing that is done is RBMs are stacked on top of eachother to make them 'Deep.' Meaning that we have our visible nodes, and then a layer of hidden nodes, followed by another layer of hidden nodes and so on. This stacking of the hidden layers allows them to learn much more intrecate patterns of latent structure just as stacking layers in traditional neural nets allows them to learn more complex patterns. Ultimately RBMs and Deep RBMs have fallen out of favor a bit with more advanced modern methods such as variational autoencoders which have a lot of the benefits and have been shown to scale much better and be easier to train. Personally I think that RBMs are a fascinating model that is worth exploring, even if in a simplistic case like this. And who knows, maybe some new breakthrough in unsupervized deep learning will be based on RBMs and you'll be happy you took the time to understand them. --- `35:Te06,function plot_rbm({rbm, DOM, plain = false, show_bias = true}){ const {weights, visible_nodes, hidden_nodes} = rbm; const plot_weights = show_bias ? weights: weights.filter(w => !(w.hidden === 'bias' || w.visible == 'bias')); const edge_color = x => x > 0? 'green': 'red'; const n_hidden = hidden_nodes.length, n_input = visible_nodes.length, node_ranges = [height - margin.bottom, margin.top + height/7], x = d3.scaleLinear() .domain([0, 1]).range([margin.left, width - margin.right]), y_visible = d3.scaleLinear() .domain([0,n_input-1]).range(node_ranges), y_hidden = d3.scaleLinear() .domain([-1,n_hidden]).range(node_ranges), opacity_scale = d3.scaleLinear() //.exponent(3) .domain(d3.extent(plot_weights, w => Math.abs(w.val))).range([0,1]), visible_x = x(0.35), hidden_x = x(0.65), bias_x = x(0.5), bias_y = margin.top, visible_color = d3.color('orangered'), hidden_color = d3.color('steelblue'), bias_color = d3.color('DarkSlateGrey'); const node_r = Math.min(margin.top*0.9, 2*(node_ranges[0], node_ranges[1])/n_input) const svg = d3.select(DOM.svg(width, height)); svg.selectAll('.edges') .data(plot_weights).enter() .append("line") .attr('x1', d => d.visible === 'bias' ? bias_x: visible_x) .attr('y1', d => d.visible === 'bias' ? bias_y: y_visible(d.visible)) .attr('x2', d => d.hidden === 'bias' ? bias_x: hidden_x) .attr('y2', d => d.hidden === 'bias' ? bias_y: y_hidden(d.hidden)) .attr('stroke', d => plain ? 'grey': edge_color(d.val)) .attr('stroke-opacity', d => plain ? 0.8 : opacity_scale(Math.abs(d.val))) .attr('stroke-width', 2) const visible = svg.append('g') .attr('class','visible') .attr("transform", `translate(${visible_x},0)`); const v_push = -105 visible.append('text') .attr('x', -25) .html(`Visible Nodes`) .attr('y', height/2) .attr('fill', visible_color.darker()) .attr('font-size', 25) .attr('text-anchor', 'start') visible.selectAll('.visible_nodes') .data(visible_nodes).enter() .append("circle") .attr('class', 'visible_nodes') .attr('fill', d => d.activation ? 'black' : 'white') .attr('stroke', visible_color) .attr('stroke-width', 3) .attr('cy', (d,i) => y_visible(i)) .attr('r', node_r) const hidden = svg.append('g').attr('transform', `translate(${hidden_x}, 0)`) const h_push = 20 hidden.append('text') .html(`Hidden Nodes`) .attr('x', 55) .attr('y', height/2) .attr('fill', hidden_color.darker()) .attr('font-size', 25) .attr('text-anchor', 'start') hidden.selectAll('.hidden_nodes') .data(hidden_nodes).enter() .append("circle") .attr('fill', d => d.activation ? 'black' : 'white') .attr('stroke', hidden_color) .attr('stroke-width', 3) .attr('cy', (d,i) => y_hidden(i)) .attr('r', node_r) const bias = svg.append('g').attr('transform', `translate(${bias_x}, ${bias_y})`) const b_push = 0 bias.append('text') .text('Bias') .attr('x', 20) .attr('dominant-baseline', 'central') .attr('fill', bias_color.darker()) .attr('font-size', 25) .attr('text-anchor', 'start') bias.append("circle") .attr('fill', 'black') .attr('stroke', bias_color) .attr('stroke-width', 3) .attr('r', node_r) return svg.node(); }36:[] 2f:{"title":"Restricted Boltzmann Machines","cells":[{"id":0,"value":"md`# Restricted Boltzmann Machines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\nRestricted Boltzmann Machines (or RBMs) were something that I never full grasped until recently. If you consult your favorite academic reference for what they are you will get some confusing answer like \"RBMs are an unsupervized probabilistic network\" which sounds cool but conveys very little to me. RBMs though are super interesting little models and are really the precursors to some of the cooler new modern neural network architectures used today. \n\nThis notebook will give you a brief introduction to what an RBM is, while implementing everything for running one in vanilla javascript. At the end we will wire together all the peices we have built and train a simple RBM on some simulated data. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"plot_rbm({rbm:demo_rbm, DOM, plain:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"texmd`\nSo we can see that every visible node is connected to every hidden node and vis versa but there are no connections between the hidden or visible nodes themselves. In addition we have a bias node that is always 'on.' Once a target node has received all its inputs in the form of weight $\\\\times$ input node value (0 or 1) it sums the values together and feeds the value into a sigmoid function: $\\\\sigma(x) = 1/(1 + \\\\exp{-x})$.\n\nIf you're coming from a statistics or machine-learning background you may recognize that every node's value is simply a logistic regression of all of the opposing layer's values. Where it gets interesting is that the output of these logistic regressions (a value between 0 and 1) is then used to draw from a bernouli distribution to decide if the node is 'turned on' or not: e.g. node $i$ in layer 1 equals 1 with probability $\\\\sigma(\\\\underline{W_{i\\\\cdot}}\\\\cdot\\\\underline{L_1})$.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"texmd`\n## Training and RBM\n\nAll the math is good but how do we actually train one of these things?\n\n### Setup\nTo start let's setup the javascript object that will represent our RBM. We will need to have three things: an array of visible nodes, an array of hidden nodes, and a corresponding list of the weights between each of those nodes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"setup_rbm = (input_size, hidden_size) => {\n const visible_nodes = init_layer(input_size);\n const hidden_nodes = init_layer(hidden_size);\n const weights = init_edge_weights(input_size, hidden_size);\n \n return {weights, visible_nodes, hidden_nodes}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"md`Let's investigate the shape of these layers and weights so we know what we're dealing with. If you want to see the functions for initializing the layers and weights they are defined at the bottom of the notebook. What matters mostly is the form they produce though. _Note: change the sizes in the code below and then check back on the diagram above._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"demo_rbm = setup_rbm(5,2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"// create an array of size of the layer we are calculating for\n// and map over to find energies/ calc activations.\nfunction calc_energy_acts(rbm, dir, input){\n const destination = dir==='in'? 'hidden_nodes': 'visible_nodes';\n const old_layer = rbm[destination];\n \n return old_layer.map((d,i) => {\n // get weights as a plain array\n const curr_weights = rbm.weights\n .filter(w => (dir==='in'? w.hidden: w.visible) === i) \n .map(w => w.val);\n // get dot product of weights by input with bias term at and (where it is in weights)\n const energy = dot_prod(curr_weights, [...input, 1])\n const p_act = logistic(energy);\n const activation = bernouli(p_act)\n return {energy, p_act, activation} \n })\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1109,"value":"md`Lets pass a sample input into our previously generated RBM to see what's happening. *If you changed the sizes for the \\`demo_rbm\\` above you're going to need to change this input array to match the new input size.* `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"sample_input = [0,0,1,0,1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"new_hidden_nodes = calc_energy_acts(demo_rbm, 'in', sample_input)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"md`So we've gotten back a new hidden layer for our RBM. Let's replace visible layer activations with our sample observation and our hidden layer with the result of passing the observation through the randomly initialized weights to see what's happened.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"updated_rbm = {\n const new_visible_nodes = sample_input.map(d=>({activation: d, p_act: d}))\n return Object.assign({}, demo_rbm, {visible_nodes: new_visible_nodes, hidden_nodes: new_hidden_nodes, })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"plot_rbm({rbm: updated_rbm, DOM})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"md`So we can see that hidden nodes either activated or not (black = activated, white = not) based on a function input activations and the weights between them (red = decreases probability of node activating, green = increases probability). The opacity of the edges corresponds to the magnitude of the weight. \n\nLastly, now that we have hidden node activations, we have to go backwards: trying to reconstruct the input activations simply from the information in the hidden nodes. Let's see this real quick.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"{\n // extract activations as plain vector\n const hidden_acts = updated_rbm.hidden_nodes.map(d => d.activation)\n // get the new visible nodes based on mapping function\n const reconstructed_visible = calc_energy_acts(updated_rbm, 'out', hidden_acts);\n // reassemble RBM with new visible nodes\n const reconstructed_rbm = Object.assign({}, updated_rbm, {visible_nodes: reconstructed_visible})\n // plot it\n return plot_rbm({rbm: reconstructed_rbm, DOM})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"pass_observation = (obs, rbm) => {\n // calculate hidden energies/ activations\n const new_hidden = calc_energy_acts(rbm, 'in', obs);\n // isolate just activations to serve as a new input\n const hidden_acts = new_hidden.map(d => d.activation)\n // calculate new visible energies/activations\n const new_visible = calc_energy_acts(rbm, 'out', hidden_acts) \n return {input: obs, hidden: new_hidden, visible: new_visible}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"calc_agreements = (weights, pass_result) => {\n const {input, hidden, visible} = pass_result;\n \n // take pass result output and calculate the edge aggreements\n return weights.map(d => {\n const input_on = d.visible === 'bias' ? 1: input[d.visible];\n const hidden_on = d.hidden === 'bias' ? 1: hidden[d.hidden].activation;\n const visible_on = d.visible === 'bias' ? 1: visible[d.visible].activation;\n\n const encode_agreement = input_on*hidden_on;\n const decode_agreement = hidden_on*visible_on;\n return {...d, encode_agreement, decode_agreement}\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"update_weights = (weight_agreements) => weight_agreements.map(w => {\n const updated_weight = w.val + learning_rate*(w.encode_agreement - w.decode_agreement)\n return {visible: w.visible, hidden: w.hidden, old: w.val, val: updated_weight}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"texmd`One last thing, we didn't talk about what function we are actually minimizing here. Our cost ($C$ in the above gradient formula) is simply the sum of the square distances between the input and the reconstruction our RBM returns to us. Let's right a function to calculate this so we can watch our model get better as it trains. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"function prediction_error(input, visible_layer){\n return visible_layer\n .reduce((sum, d, i) => sum + square(d.activation - input[i]),0)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1174,"value":"md`Bundling it all together into a function that passes an input to an RBM and returns the reconstruction error and updated weights.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"function pass_and_update(rbm, input){\n \n // pass input through the current network and get back activation results\n const pass_result = pass_observation(input, rbm);\n \n // calculate reconstruction error. \n const error = prediction_error(input, pass_result.visible);\n \n // for each edge calculate if the endpoints matched eachother.\n const weight_agreements = calc_agreements(rbm.weights, pass_result, input);\n \n // update weights\n const new_weights = update_weights(weight_agreements);\n \n return {new_weights, error}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`\n## Watching it learn\n\nNow comes the fun part. We will setup an RBM and train it on some simulated data. \n\nThe simulated data comes in the form of a binary vector of length ${group_one.length} corresponding to two groups favoring different elements. You can think about this as being the presence of ingredients in different recipes from two chefs. I have initialized the probabilities below \\`group_{one,two}\\` but you should definitely change them and see how the model reacts.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"training_errors_rbm = {\t\n const input_size = sample_data[0].length,\n num_obs = sample_data.length,\n errors = [];\n \n let rbm = setup_rbm(input_size, number_hidden_nodes),\n epoch = 0,\n epoch_error,\n input, \n weights_and_error;\n \n while (epoch < epochs){\n epoch_error = 0;\n \n // feed all training examples through and update at each minibatch\n for(let i=0; i x(i))\n .y((d) => y(d));\n \n const svg = d3.select(DOM.svg(width, height/2));\n \n \n svg.append(\"path\")\n .datum(training_errors)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"orangered\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"group_one = [0.8, 0.9, 0.7, 0.2, 0.1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"group_two = [0.2,0.3, 0.5, 0.9, 0.85]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"md`Fiddle with the number of hidden nodes: we know that there are two underlying groups in the data, so two should be the best, but what happens if you bump up to three? Does the third just sit and not learn anything or does it pick up the slack for some other group? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"viewof number_hidden_nodes = slider({\n message:'Number of hidden nodes', \n min: 0, max: group_one.length - 1, start: 2, step: 1,\n precision: 2, int: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"md`What happens if your learning rate is too high? Does the model fail to get any better? If it's too low does it take forever to converge?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"viewof learning_rate = slider({\n message: 'Learning rate', \n min: 0.0001, max: 0.5, start: 0.01,\n step: 0.0001, precision: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"md`Trying to find the correct number of epochs to allow the model to learn what it's going to but not waste compute cycles is always fun. Lowered your learning rate? You'll probably need to increase our epochs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"viewof epochs = slider({\n message: 'Number of times through all training observations',\n min: 1, max: 2000, start: 300, step: 1, int: true}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"probs_to_obs = group_probs => group_probs.map(bernouli)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"sample_data = {\n const samples_per_group = 20;\n return n_array(samples_per_group*2).map((_,i) => {\n \tconst group_probs = i%2 ? group_one : group_two;\n return probs_to_obs(group_probs)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"training_errors = training_errors_rbm.errors","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"training_rbm = training_errors_rbm.rbm","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"init_layer = (num_nodes) => n_array(num_nodes).map(() => ({energy: 0, activation: 0}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"function rbm_load_obs(rbm, obs){\n const visible_nodes = obs.map(d=>({activation: d, p_act: d}))\n return {...rbm, visible_nodes}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"init_edge_weights = (n_visible, n_hidden) => n_array((n_visible+1)*(n_hidden+1) - 1)\n .map((d,i) => {\n const nvis = n_visible + 1;\n const visible_axis = i%(nvis);\n const hidden_axis = (i - i%nvis)/nvis;\n return {\n visible: visible_axis === n_visible ? 'bias': visible_axis,\n hidden: hidden_axis === n_hidden ? 'bias': hidden_axis,\n val: Math.random() - 0.5\n }\n }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"logistic = (x) => 1 /(1 + Math.exp(-x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"square = (x) => x*x","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"dot_prod = (v1,v2) => v1.reduce((sum, d, i) => sum + d*v2[i], 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"get_w = (weights,i,j) => weights.filter(d => d.source === i && d.target === j)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"n_array = (n) => [...(new Array(n))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"bernouli = (prob = 0.5) => Math.random() < prob ? 1 : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"d3 = Object.assign(require('d3'), require('d3-selection-multi'), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"function texmd (strings) {\n var string = strings[0] + \"\", i = 0, n = arguments.length;\n while (++i < n) string += arguments[i] + \"\" + strings[i];\n \n var display_maths = [];\n string = string.replace(/\\$\\$([^\\$]*)\\$\\$/g, (s, m) => {\n var i = display_maths.push(m) - 1;\n return `\\n\\n

\\n\\n`;\n });\n \n var inline_maths = [];\n string = string.replace(/\\$([^\\$]*)\\$/g, (s, m) => {\n var i = inline_maths.push(m) - 1;\n return ``;\n });\n \n var node = md([string]);\n \n node.querySelectorAll('span.imath').forEach(span => {\n var i = parseInt(span.attributes.n.value);\n span.appendChild(tex([inline_maths[i]]));\n span.style['font-size'] = '.95em';\n });\n \n node.querySelectorAll('div.dmath').forEach(div => {\n var i = parseInt(div.attributes.n.value);\n div.appendChild(tex.block([display_maths[i]]));\n div.style['font-size'] = '.95em';\n });\n \n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"function slider({\n message = 'Set your value', \n min = 0, max = 1, start = 0.5, step = 0.1,\n precision = 3, int = false,\n}){\n \n min = min/step;\n max = max/step;\n start = start/step;\n \n const div = html`\n\t${message}\n \n ${start*step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start*step;\n\n \n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber*step; \n div.value = newValue;\n value_disp.innerHTML = int ? Math.round(newValue) : newValue.toPrecision(precision); \n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}