Mobile slider UI examples

Slider UI examples

• See the flow
  VSCO: Photo & Video Editor↗

  A horizontal slider is positioned below the tabs, currently set to 0.0.

• See the flow
  Bible Chat: Daily Devotional↗

  A modal overlay is visible at the bottom, containing a horizontal slider for adjusting the font size, represented by a small 'A' on the left and a large 'A' on the right.

• See the flow
  Windy.app — Wind, Tides, Radar↗

  A bottom control bar allows the user to navigate through time, with 'Tue, May 13' selected and a time slider ranging from 2 AM to 8 PM.

• See the flow
  Sky Tonight - Stargazing Guide↗

  At the top, a time-scrubber bar allows the user to adjust the date and time.

• See the flow
  Premier League - Scores, News↗

  The player controls are located at the bottom on a dark purple background, including a progress slider, a play/pause toggle, and a rewind button.

• See the flow
  Hotels.com: Book hotels & more↗

  A 'Price per night' range slider allows users to adjust the budget from 'P 0' to 'P 48,000+'.

• See the flow
  Everlook- Face & Body Editor↗

  The modal displays a preview of a woman's portrait with an interactive slider overlay that allows users to adjust facial features.

• See the flow
  Redfin: Buy, Sell & Rent Homes↗

  A 'Debt-to-income ratio' section includes a slider component with a color-coded gradient (teal to orange) and a status label 'Comfortable'.

• See the flow
  Widgetable: Besties & Couples↗

  Below the preview, a color picker panel is active, featuring a segmented control to switch between 'Grid', 'Spectrum', and 'Sliders' modes, with 'Sliders' currently selected.

• See the flow
  10K Runner, Couch to 10K Run↗

  It features a central gradient slider with a circular handle that allows the user to rate the intensity of their completed workout.

• See the flow
  Plane Finder ⁃ Flight Tracker↗

  The bottom of the screen features a playback control bar with a play button, a slider, and a speed/time icon.

• See the flow
  Too Good To Go: Save Good Food↗

  A distance slider below the map changes the search radius, with the current value beside it.

• See the flow
  Map My Run GPS Running Tracker↗

  At the bottom of the screen, a progress bar shows the current timestamp '00:01' out of a total duration of '00:34', with a circular scrubber handle.

• See the flow
  Rork↗

  Below the illustration, the text 'I'm comfortable with coding' is repeated as a label for a horizontal slider component.

• See the flow
  FLYP - Fashion Design Studio↗

  Below the preview is an 'Add foreground image' button and an 'Intensity' slider for adjusting the strength of the blend effect.

• See the flow
  CraftBook: Crochet Made Easy↗

  A large, prominent '27' is displayed in the center, which is controlled by a horizontal slider below it.

• See the flow
  calimoto Motorcycle Navigation↗

  Below the filters, a 'DISTANCE IN MILES' section provides a dual-handle range slider to specify ride length between 62 and 310 miles.

• See the flow
  ZARA↗

  Below these, there is a slider labeled 'CLOTHING USE PREFERENCE*' with a range from 'VERY FITTED' to 'VERY LOOSE', currently set to 'REGULAR'.

• See the flow
  Deezer: Music Player, Podcast↗

  The 'Playback' section contains a 'Normalize volume' toggle and a 'Crossfade duration' slider ranging from 0s to 10s.

• See the flow
  Klook: Travel & Activities↗

  The 'Price range' section features a horizontal slider with two circular handles, allowing users to set a minimum and maximum price, currently set from 0 to 172,971 in Philippine Pesos.