Input Slider Width?

Community Help
1

I simply have an input slider,Here, and I want it to occupy 100% of the viewbox. Normally you can manipulate this via CSS, but Observable is over-riding this.

On the bottom of my notebook, you can see in my CSS cell I have hover effects that do change the width and opacity, but when I remove the :hover, the width defaults back to Observable’s default of 240px.

Any advice to manipulate the width of the input slider and mantain the viewof syntax?

2

The reason is that your selector’s specificity is too low to override Observable’s default styles:

  • .timeSlide: specificity of 1
  • input["range"]: specificity of 2

You can use the selector input.timeSlide to get the specificity up to 2 and override Observable’s style.

If you right-click your slider and choose “inspect element” you can view the CSS rules that get applied to it.

3

To add to @mootari’s answer, Observable applies a default style of 240px to the following selectors:

input:not([type])
input[type=email]
input[type=number]
input[type=password]
input[type=range]
input[type=search]
input[type=tel]
input[type=text]
input[type=url]

We don’t recommend using global stylesheets because they often don’t work with imports or conflict with default styles, and can be unpredictable with dataflow. Instead, we recommend using an inline style, which conveniently will also override the default style:

html`<input type=range min=2000 max=2018 step=1 style="width: 100%;">`
4

To add to @mbostock’s answer, there’s a fairly easy way to create your own scoped styles, using the following helper:

function scopedStyle(scope, css) {
  const style = html`<style>`;
  style.textContent = css.replace(/\:scope\b/g, scope); 
  return style;
}

Example:

const namespace = DOM.uid('scope').id;
const style = scopedStyle('.' + namespace, `
  :scope { font-family: sans-serif }
  :scope, :scope > * { padding: 0 }
`);
return html`<div class="${namespace}">
  ${style}
  <span> text ...
`;