md` ~~~js function slider({ ~~~ ~~~js min: 0, max: 1, step: 0.1, value: 0.5, // initial value title: 'some title', desc: 'some description', ~~~ **[element]** For the next two arguments, replace [element] with one of the following: [title, slider, output, desc, div *(element that ties the others together)*]. ~~~js [element]Style: { width: '150px', color: 'white', ... // other CSS styles }, [element]Attrs: { id: 'slider1', cla‎ss: 'cool-slider', ... // other attributes }, ~~~

**theme** ~~~js theme: 'white-round', ~~~ Choose one from [default, white]. You can change the slider's thumb appearance by adding -thin or -round to the theme, e.g. white-round.

**background** ~~~js background: { type: 'progress', colors: [yourColors] }, ~~~ type: one of [normal, double, interpolate, progress] ~~~js if (type == 'normal') use color: yourColor instead o‎f colors: [yourColors] ~~~ ~~~js if (type == 'progress') use a list o‎f three colors – starting one, final one and optional right-most solid color (see color-incrementing-slider) ~~~ ~~~js if (type == 'interpolate') use a list o‎f two colors (left and right) or completely omit colors argument and use some d3 color interpolator (see gradient–fade background) ~~~

**highlight** ~~~js highlight: { lower: 60, upper: 90, colors: { normal: '#EDEDED', inactive: '#B7E5C6', active: '#7EE5A0' }, preventUpdate: false }, ~~~ If preventUpdate is set to true, then the slider won't be updated when inside of highlighted area *(see restricted slider)*.

~~~js initialize: true, // if false, oninput won't be triggered when slider is created ~~~

**oninput** ~~~js oninput: objs => { // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\ } ~~~ objs object holds title, slider, output, desc, and div elements. Additionally, you have an access to current value of the slider (objs.value), progress [0-1] (objs.progress) and settings (objs.settings), so you can access the min and max values for example (objs.settings.min, objs.settings.max). You can also change the behavior of slider by using div's update method *(which also updates the div's value and output text)*, for example by using objs.div.update(objs.settings.max - objs.slider.value) to create a *tricky slider.* ~~~js }) ~~~ `