Skip to main content

Tagged “codepen”

Simple input[type=range] styling, by Ana Tudor

Ana demonstrates how to achieve a range slider effect accessibly, using web standards and without needing to reach for libraries.

As Ana’s tweet explains, this offers a number of features and benefits:

  • can drag thumb with JS disabled
  • receives focus
  • keyboard navigation
  • clicking track moves thumb there and changes slider value
  • seen as slider in Accessibility panel
  • no library needed, so less code in total

My Codepen Cheatsheet

I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.

Control the Editor View layout

Append /left/, /right/, or /top/ to the URL to set the editor layout.

Append ?editors=1111 (change numbers as appropriate) to the URL to set which panels are maximised (in order of HTML, CSS, JavaScript, and console).

For example:

https://codepen.io/fuzzylogicx/pen/BEEYQL/left/?editors=1100

References

See all tags.

External Link Bookmark Note Entry Search