The Constitutions

Stage 4: The Constitutions

This is the stage where the new UX pattern for Unit 16 lives. Before you look at the code, read the history it is designed to show.

The Indian Reorganization Act encouraged Tribal nations to adopt written constitutions and establish formal governments. The Bureau of Indian Affairs created a model constitution, a template document, that many Tribes adopted with minimal modification. These documents established elected Tribal councils, written bylaws, parliamentary procedure, and provisions requiring the Secretary of Interior's approval for major decisions. They were designed quickly, during a period of active federal policy change, and they were built on western governance assumptions.

The problem was not that Tribes lacked governing structures. Every Tribal nation already had one. The governing traditions of the Lakota, the Ojibwe, the Dakota, and hundreds of other nations had functioned for centuries before contact with European governments. They operated through different mechanisms: consensus-based decision making, clan governance, hereditary leadership, ceremonial authority, oral tradition as binding law. The IRA constitutional model was a western government template placed over those existing systems, not built from them.

Many of those IRA-era constitutions are still in effect today. Some Tribes have revised them extensively. Others are in the middle of constitutional reform processes. Others still operate under documents drafted in the 1930s and 1940s that require the Secretary of Interior's approval to change enrollment criteria or sell land.

The HTML Structure

The slider is built from three layers stacked inside a positioned container.

• The right panel (.slider-right) fills the full container. It is always fully visible underneath. When you drag left, you see more of it.
• The left panel (.slider-left) sits on top of the right panel. It is clipped so only part of it shows. When you drag right, more of it is revealed.
• The handle (.slider-handle) sits on top of both. It contains the vertical gold line and the circular drag button.

The CSS

Positioning the three layers

• position: relative on the wrapper: This makes the wrapper the "positioned ancestor" that all position: absolute children are measured against. Without this, absolutely positioned children would escape the container.
• position: absolute; inset: 0 on both panels: inset: 0 is shorthand for top: 0; right: 0; bottom: 0; left: 0. Both panels stretch to fill the entire wrapper.
• overflow: hidden on the wrapper: Clips anything inside to the wrapper's rounded rectangle. This is what makes the panels invisible outside the border-radius.
• z-index: 2 on .slider-left: Stacks the left panel above the right panel. JavaScript will clip it with clip-path to control how much shows.

The clip-path technique

• clip-path: inset(top right bottom left): Like padding in reverse. The values define how far to clip from each edge. inset(0 50% 0 0) clips 50% from the right, showing only the left half. JavaScript will change the second value (the right clip) to move the divider.
• Why clip-path instead of width? If you set width: 50% on the left panel, its internal content would reflow every time the width changed, causing text to re-wrap jankily on every drag frame. clip-path clips the panel visually without changing its layout, so content stays put while you drag.

The handle

• transform: translateX(-50%): The handle's left property positions its left edge. Without this transform, the 40px-wide handle would be off-center. Pulling it left by 50% of its own width centers it exactly on the divider line.
• cursor: col-resize: Changes the cursor to a left-right resize icon when hovering over the handle. This is a built-in browser cursor that communicates "you can drag this horizontally" without any custom icon.

The JavaScript

The slider uses three mouse events working together. This is the first time in the curriculum that three event listeners work as a coordinated sequence to track a continuous gesture.

The three-event sequence

• mousedown is attached to the handle: triggers when the user presses down on the handle.
• mousemove and mouseup are attached to document: if they were on the handle, dragging faster than the cursor could track would "escape" the handle and stop the drag. Listening on the full document means the drag continues no matter where the cursor goes.
• userSelect: 'none' while dragging: prevents the browser from highlighting text in the panels while the user is dragging. Cleared on mouseup.
• e.preventDefault() on mousedown: prevents default browser behaviors (like text selection) when the drag begins.

The updateSlider function

• getBoundingClientRect(): Returns an object with the element's left, right, top, bottom, width, and height values in pixels, measured from the viewport's top-left corner. This is how you find where an element actually is on screen at any given moment.
• (x - rect.left) / rect.width: Converts the cursor's absolute pixel position into a fraction of the wrapper's width. If the wrapper starts at pixel 100 and is 800px wide, a cursor at pixel 500 gives (500 - 100) / 800 = 0.5 (50%).
• Math.max(0.1, Math.min(0.9, pct)): Clamps pct between 0.1 and 0.9. The slider can never go below 10% or above 90%. Math.min(0.9, pct) ensures the value does not exceed 0.9. Math.max(0.1, ...) ensures it does not drop below 0.1.
• clipPath: `inset(0 ${(1 - pct) * 100}% 0 0)`: Updates the clip dynamically. If pct = 0.7, the right clip is 30%, meaning 70% of the left panel is visible. Template literals (backticks + ${}) let you embed a variable directly inside a CSS string.

Fill In Your Content

The slider has pre-written content comparing the IRA model to traditional governance principles. Your task is to read it carefully and replace the placeholder intro paragraph with your own writing.

• Section intro paragraph: Write 2 to 3 sentences in your own words introducing The Constitutions section. What did the IRA encourage Tribes to do? What was the limitation of that process?
• Slider content: The IRA model and traditional governance features are pre-written. If your research turned up different or more specific examples for your own Tribal nation, add them as an additional feature in either panel.

Why This Design Choice

A static side-by-side layout would show the same information. Why build a draggable slider instead?

The slider creates an active reading experience. The reader has to decide which side to reveal more of. That choice makes the comparison feel like something you do rather than something you are told. The moment you drag left to reveal more of the traditional governance panel, you have made a decision. That small act of agency is different from reading a table.

It also reflects the historical reality. The two systems were not cleanly separable. They coexisted. Some nations operated under IRA constitutions for governance matters and followed traditional authority for ceremonial ones. Some found ways to integrate both. The slider, which always shows some of each side simultaneously, mirrors that complexity better than a before-and-after format would.