diff --git a/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js b/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
index b29389b39..544e31bff 100644
--- a/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
+++ b/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
@@ -71,6 +71,7 @@ var ImageViewerSelectWidget = View.extend({
         const vm = new FrameSelector({
             el,
             propsData: {
+                itemId: this.itemId,
                 imageMetadata: imageMetadata,
                 frameUpdate: frameUpdate
             }
diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
index 4f55c96f0..0efda3797 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -1,26 +1,33 @@
 <script>
+import { restRequest } from '@girder/core/rest';
 import { Chrome } from 'vue-color';
-import { CHANNEL_COLORS, OTHER_COLORS } from '../colors'
+import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
+import HistogramEditor from './HistogramEditor.vue';
 
 export default {
-    props: ['layers', 'layerMap'],
+    props: ['itemId', 'currentFrame', 'layers', 'layerMap'],
     emits: ['updateStyle'],
     components: {
-        'color-picker': Chrome
+        'color-picker': Chrome,
+        HistogramEditor,
     },
     data() {
         return {
             enabledLayers: this.layers,
             colorPickerShown: undefined,
-            currentColorPickerRef: undefined,
+            currentFrameHistogram: undefined,
             compositeLayerInfo: {},
-        }
-    },
-    watch: {
-        layers() {
-            this.enabledLayers = this.layers
-            this.initializeLayerInfo()
-            this.updateStyle()
+            expandedRows: [],
+            autoRangeForAll: undefined,
+            histogramParams: {
+                frame: this.currentFrame,
+                width: 1024,
+                height: 1024,
+                bins: 512,
+                resample: false,
+                style: {},
+                roundRange: true,
+            }
         }
     },
     methods: {
@@ -29,11 +36,15 @@ export default {
             this.compositeLayerInfo = {}
             this.layers.forEach((layerName, i) => {
                 this.compositeLayerInfo[layerName] = {
-                    framedelta: this.layerMap ?this.layerMap[layerName] :undefined,
+                    layerName,
+                    index: i,
+                    framedelta: this.layerMap ? this.layerMap[layerName] : undefined,
                     band: this.layerMap ? undefined : i + 1,  // expected 1-based index
                     enabled: true,
                     min: undefined,
                     max: undefined,
+                    custom: false,
+                    autoRange: undefined
                 }
             })
             Object.entries(CHANNEL_COLORS).forEach(([channelName, color]) => {
@@ -57,6 +68,16 @@ export default {
                     usedColors.push(chosenColor)
                 }
             })
+            this.fetchCurrentFrameHistogram()
+        },
+        fetchCurrentFrameHistogram() {
+            restRequest({
+                type: 'GET',
+                url: 'item/' + this.itemId + '/tiles/histogram',
+                data: this.histogramParams,
+            }).then((response) => {
+                this.currentFrameHistogram = response
+            });
         },
         toggleEnableAll() {
             if (this.enabledLayers !== this.layers) {
@@ -70,33 +91,74 @@ export default {
             this.colorPickerShown = layer
             if (this.colorPickerShown === undefined) {
                 document.removeEventListener('click', this.documentClick);
-                // Only update style when picker is closed
-                this.updateStyle()
             }
             else {
-                this.currentColorPickerRef = document.getElementById(layer+'_picker')
                 document.addEventListener('click', this.documentClick);
             }
         },
+        toggleExpanded(index) {
+            if (this.expandedRows.includes(index)) {
+                this.expandedRows = this.expandedRows.filter((v) => v !== index)
+            } else {
+                this.expandedRows = [...this.expandedRows, index]
+            }
+        },
+        toggleAllExpanded() {
+            if (this.expandedRows.length === this.layers.length) {
+                this.expandedRows = []
+            } else {
+                this.expandedRows = Object.values(this.compositeLayerInfo).map(({index}) => index)
+            }
+        },
+        updateLayerAutoRange(layer, value) {
+            this.compositeLayerInfo = Object.assign(
+                {}, this.compositeLayerInfo,
+                {[layer] : Object.assign(
+                    {}, this.compositeLayerInfo[layer], { autoRange: value }
+                )}
+            )
+            this.updateStyle();
+        },
+        updateAllAutoRanges(value) {
+            this.autoRangeForAll = value
+            this.compositeLayerInfo = Object.fromEntries(
+                Object.entries(this.compositeLayerInfo).map(([layerName, layerInfo]) => {
+                    return [
+                        layerName,
+                        Object.assign({}, layerInfo, { autoRange: value })
+                    ]
+                })
+            )
+            this.updateStyle();
+        },
+        allAutoRange() {
+            return Object.values(this.compositeLayerInfo).every(({ autoRange }) => autoRange !== undefined)
+        },
         documentClick(e) {
-            const picker = this.currentColorPickerRef;
-            if (picker && picker !== e.target && !picker.contains(e.target)) {
+            const picker = document.getElementById('color_picker');
+            if (
+                picker
+                && picker !== e.target
+                && !picker.contains(e.target)
+                && !e.target.classList.contains('current-color')
+            ) {
                 this.toggleColorPicker(undefined);
             }
         },
         updateLayerColor(layer, swatch) {
             this.compositeLayerInfo[layer].palette = swatch.hex;
+            this.updateStyle();
         },
-        updateLayerMin(event, layer) {
-            const newVal = event.target.valueAsNumber;
+        updateLayerMin(layer, newVal) {
             const newMinVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
             this.compositeLayerInfo[layer].min = newMinVal;
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
         },
-        updateLayerMax(event, layer) {
-            const newVal = event.target.valueAsNumber;
+        updateLayerMax(layer, newVal) {
             const newMaxVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
             this.compositeLayerInfo[layer].max = newMaxVal;
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
         },
         updateActiveLayers() {
@@ -111,8 +173,13 @@ export default {
             ).filter((layer) => layer.enabled);
             const styleArray = []
             activeLayers.forEach((layer) => {
-                const styleEntry = Object.assign({}, layer);
-                delete styleEntry.enabled
+                const styleEntry = {
+                    min: layer.autoRange !== undefined ? `min:${layer.autoRange / 100}` : layer.min,
+                    max: layer.autoRange !== undefined ? `max:${layer.autoRange / 100}` : layer.max,
+                    palette: layer.palette,
+                    framedelta: layer.framedelta,
+                    band: layer.band,
+                }
                 styleArray.push(styleEntry);
             });
             this.$emit('updateStyle', {bands: styleArray});
@@ -130,68 +197,114 @@ export default {
         <table id="composite-layer-table" class="table table-condensed">
             <thead class="table-header">
                 <tr>
-                    <th class="layer-col">Layer</th>
-                    <th class="enabled-col">
+                    <th>
                         <input
                             type="checkbox"
+                            class="input-80"
                             :checked="enabledLayers === layers"
                             @input="toggleEnableAll"
                         >
-                        Enable
                     </th>
-                    <th class="color-col">Color</th>
-                    <th class="precision-col">Min</th>
-                    <th class="precision-col">Max</th>
+                    <th></th>
+                    <th></th>
+                    <th>
+                        <div class="auto-range-col">
+                            <div class="auto-range-label">
+                                <span class="small-text">Auto Range</span>
+                                <label class="switch">
+                                    <span
+                                        :class="allAutoRange() ? 'slider checked' : 'slider'"
+                                        @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
+                                    />
+                                </label>
+                            </div>
+                            <span
+                                v-if="allAutoRange()"
+                                class="percentage-input"
+                            >
+                                <input
+                                    type="number"
+                                    class="input-80"
+                                    :max="50"
+                                    :min="0"
+                                    :value="autoRangeForAll"
+                                    @input="(e) => updateAllAutoRanges(e.target.value)"
+                                >
+                            </span>
+                        </div>
+                        <i
+                            :class="expandedRows.length === layers.length ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                            @click="toggleAllExpanded"
+                        />
+                    </th>
                 </tr>
+                <!-- color picker should display relative to sticky table head -->
+                <color-picker
+                    v-if="colorPickerShown"
+                    id="color_picker"
+                    class="picker-offset"
+                    :disableAlpha="true"
+                    :value="Object.values(compositeLayerInfo).find((({layerName}) => layerName === colorPickerShown)).palette"
+                    @input="(swatch) => {updateLayerColor(colorPickerShown, swatch)}"
+                />
             </thead>
             <tbody>
                 <tr
-                    v-for="[layer, layerInfo] in Object.entries(compositeLayerInfo).filter(([, layerInfo]) => layerInfo)"
-                    :key="layer"
+                    v-for="{
+                        layerName, index, palette,
+                        autoRange, min, max,
+                        framedelta
+                    } in Object.values(compositeLayerInfo)"
+                    :key="layerName"
+                    :class="expandedRows.includes(index) ? 'tall-row' : ''"
                 >
-                    <td>{{ layer }}</td>
-                    <td>
+                    <td class="enable-col">
                         <input
                             type="checkbox"
-                            :value="layer"
+                            class="input-80"
+                            :value="layerName"
                             v-model="enabledLayers"
                             @change="updateActiveLayers"
                         >
                     </td>
-                    <td :id="layer+'_picker'">
+                    <td class="name-col">{{ layerName }}</td>
+                    <td class="color-col">
                         <span
                             class="current-color"
-                            :style="{ 'background-color': layerInfo.palette }"
-                            @click="() => toggleColorPicker(layer)"
-                        />
-                        <color-picker
-                            class="picker-offset"
-                            :disableAlpha="true"
-                            v-if="colorPickerShown === layer"
-                            :value="layerInfo.palette"
-                            @input="(swatch) => {updateLayerColor(layer, swatch)}"
+                            :style="{ 'background-color': palette }"
+                            @click="() => toggleColorPicker(layerName)"
                         />
                     </td>
-                    <td>
-                        <input
-                            type="number"
-                            step="0.01"
-                            min="0"
-                            max="65535"
-                            :value="layerInfo.min"
-                            @change.prevent="(event) => updateLayerMin(event, layer)"
-                        >
-                    </td>
-                    <td>
-                        <input
-                            type="number"
-                            step="0.01"
-                            min="0"
-                            max="65535"
-                            :value="layerInfo.max"
-                            @change.prevent="(event) => updateLayerMax(event, layer)"
-                        >
+                    <td class="auto-range-col">
+                        <div class="auto-range-toggle">
+                            <label class="switch">
+                                <span
+                                    :class="autoRange ? 'slider checked' : 'slider'"
+                                    @click="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
+                                />
+                            </label>
+                        </div>
+                        <i
+                            :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                            @click="() => toggleExpanded(index)"
+                        />
                     </td>
+                    <div v-if="expandedRows.includes(index)" class="advanced-section">
+                        <histogram-editor
+                            :itemId="itemId"
+                            :layerIndex="index"
+                            :currentFrame="currentFrame"
+                            :currentFrameHistogram="currentFrameHistogram"
+                            :histogramParams="histogramParams"
+                            :framedelta="framedelta"
+                            :autoRange="autoRange"
+                            :currentMin="min"
+                            :currentMax="max"
+                            @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
+                            @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
+                            @updateAutoRange="(v) => updateLayerAutoRange(layerName, v)"
+                        />
+                    </div>
                 </tr>
             </tbody>
         </table>
@@ -201,30 +314,136 @@ export default {
 <style scoped>
 .current-color {
     display: inline-block;
-    width: 50px;
-    height: 20px;
+    width: calc(100% - 10px);
+    height: 25px;
     background-color: #000;
     cursor: pointer;
 }
 .picker-offset {
     position: absolute;
     z-index: 100;
-    margin-left: 50px;
+    right: 15%
 }
 .table-header {
     position: sticky;
     top: 0px;
     background-color: white;
     z-index: 2;
+    border-bottom: 3px solid;
+}
+.small-text {
+    font-size: 10px;
+}
+.tall-row {
+    height: 75px;
+}
+.enable-col {
+    width: 10%;
+}
+.name-col {
+    width: 40%;
+}
+.color-col {
+    width: 25%;
+}
+.auto-range-col {
+    position: relative;
+}
+.auto-range-toggle {
+    min-width: 100px;
+    display: flex;
+    column-gap: 10px;
+    align-content: space-around;
+    padding: 0;
+}
+.auto-range-label {
+    display: flex;
+    flex-direction: column;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 20px;
+  margin-top: 5px;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+.slider.checked {
+  background-color: #2196F3;
+}
+.slider:focus{
+  box-shadow: 0 0 1px #2196F3;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+.slider.checked:before {
+  -webkit-transform: translateX(22px);
+  -ms-transform: translateX(22px);
+  transform: translateX(22px);
 }
 .table-container {
+    overflow-y: scroll;
     overflow-x: auto;
-    overflow-y: hidden;
+    position: relative;
+    max-height: 300px;
 }
 .table-container td {
     padding: 0 5px;
 }
 .table-container input {
-    max-width: 70px;
+    max-width: 80px;
+}
+.table {
+    border-collapse: separate;
+}
+.expand-btn {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+}
+.advanced-section {
+    position: absolute;
+    left: 0px;
+    width: calc(100% - 10px);
+    margin: 30px 0px 0px;
+    height: 40px;
+}
+</style>
+
+<style>
+.input-80 {
+    width: 80px
+}
+.percentage-input {
+    position: relative;
+    margin-top: 5px;
+    width: 80px;
+}
+.percentage-input::after {
+    position: absolute;
+    content: '%';
+    left: 45px;
+    top: 3px;
 }
 </style>
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index 7eda00758..c5c47f220 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -3,10 +3,11 @@ import Vue from 'vue';
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue'
 export default Vue.extend({
-    props: ['imageMetadata', 'frameUpdate'],
+    props: ['itemId', 'imageMetadata', 'frameUpdate'],
     components: { CompositeLayers, DualInput },
     data() {
         return {
+            loaded: false,
             currentFrame: 0,
             maxFrame: 0,
             sliderModes: [],
@@ -33,7 +34,7 @@ export default Vue.extend({
     },
     methods: {
         updateStyle(style) {
-            this.style = style
+            this.style = Object.assign(this.style, style)
             this.update()
         },
         updateAxisSlider(event) {
@@ -52,7 +53,7 @@ export default Vue.extend({
                 }
             });
             this.currentFrame = frame
-            let style = this.currentModeId > 1 ? this.style : undefined
+            let style = this.currentModeId > 1 ? this.style[this.currentModeId] : undefined
             this.frameUpdate(frame, style);
         },
         fillMetadata() {
@@ -72,7 +73,7 @@ export default Vue.extend({
             ) {
                 this.imageMetadata.channelmap = Object.fromEntries(
                     [...Array(this.imageMetadata.IndexRange['IndexC']).keys()].map(
-                        (i) => [`Channel ${i}`, i]
+                        (i) => [`Channel ${i + 1}`, i]
                     )
                 )
                 this.imageMetadata.channels = Object.keys(this.imageMetadata.channelmap)
@@ -83,7 +84,7 @@ export default Vue.extend({
                 this.imageMetadata.bands = Object.values(this.imageMetadata.bands).map(
                     (b, i) => {
                         if (!b.interpretation) {
-                            return `Band ${i}`
+                            return `Band ${i + 1}`
                         } else {
                             return b.interpretation.split("=")[0]
                         }
@@ -131,14 +132,15 @@ export default Vue.extend({
         this.maxFrame = this.imageMetadata.frames.length - 1
         this.populateIndices()
         this.populateModes()
+        this.loaded = true
     }
 });
 </script>
 
 <template>
-    <div class="image-frame-control-box">
-        <div id="current_image_frame" style="display: none;">{{ currentFrame }}</div>
-        <div id="current_image_style" style="display: none;">{{ style }}</div>
+    <div class="image-frame-control-box" v-if="loaded">
+        <div id="current_image_frame" class="invisible">{{ currentFrame }}</div>
+        <div id="current_image_style" class="invisible">{{ style }}</div>
         <div>
             <label for="mode">Image control mode: </label>
             <select
@@ -172,17 +174,37 @@ export default Vue.extend({
             />
         </table>
 
-        <div v-if="currentModeId > 1" class="image-frame-simple-control">
+        <!-- Use composite layers component twice so state for each one is maintained while invisible -->
+        <!-- Use styling instead of v-if to make each invisible so that the components are not unmounted -->
+        <div class="image-frame-simple-control">
             <composite-layers
-                :layers="currentModeId === 2 ? imageMetadata.channels : imageMetadata.bands"
-                :layerMap="currentModeId === 2 ? imageMetadata.channelmap : undefined"
-                @updateStyle="updateStyle"
+                key="channels"
+                v-if="imageMetadata.channels"
+                :itemId="itemId"
+                :currentFrame="currentFrame"
+                :layers="imageMetadata.channels"
+                :layerMap="imageMetadata.channelmap"
+                :class="currentModeId === 2 ? '' : 'invisible'"
+                @updateStyle="(style) => updateStyle({2: style})"
+            />
+            <composite-layers
+                key="bands"
+                v-if="imageMetadata.bands"
+                :itemId="itemId"
+                :currentFrame="currentFrame"
+                :layers="imageMetadata.bands"
+                :layerMap="undefined"
+                :class="currentModeId === 3 ? '' : 'invisible'"
+                @updateStyle="(style) => updateStyle({3: style})"
             />
         </div>
     </div>
 </template>
 
 <style scoped>
+.invisible {
+    display: none;
+}
 .image-frame-control-box {
     display: flex;
     flex-direction: column;
diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
new file mode 100644
index 000000000..71f8dcd13
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -0,0 +1,359 @@
+<script>
+import { restRequest } from '@girder/core/rest';
+import { nextTick } from 'vue';
+import { makeDraggableSVG } from '../utils/drag';
+
+export default {
+    props: [
+        'itemId',
+        'layerIndex',
+        'currentFrame',
+        'currentFrameHistogram',
+        'histogramParams',
+        'framedelta',
+        'currentMin',
+        'currentMax',
+        'autoRange',
+    ],
+    emits: ['updateMin', 'updateMax', 'updateAutoRange'],
+    data() {
+        return {
+            histogram: undefined,
+            xRange: [undefined, undefined],
+            vRange: [undefined, undefined],
+        }
+    },
+    methods: {
+        fetchHistogram() {
+            if (this.framedelta !== undefined) {
+                restRequest({
+                    type: 'GET',
+                    url: 'item/' + this.itemId + '/tiles/histogram',
+                    data: Object.assign(
+                        this.histogramParams,
+                        {frame: this.currentFrame + this.framedelta}
+                    )
+                }).then((response) => {
+                    if (response.length < 3) {
+                        this.histogram = response[0]
+                    } else {
+                        this.histogram = response[1]
+                    }
+                })
+            } else {
+                this.histogram = this.layerIndex < this.currentFrameHistogram.length
+                    ? this.currentFrameHistogram[this.layerIndex]
+                    : this.currentFrameHistogram[0]
+            }
+        },
+        simplifyHistogram(hist) {
+            let aggregationFactor = Math.round(1000 / (this.xRange[1] - this.xRange[0]))
+            if (aggregationFactor < 1) aggregationFactor = 1
+            const simpleHistogram = []
+            for (var i = 0; i < hist.length; i += aggregationFactor) {
+                simpleHistogram.push(
+                    hist.slice(i, i + aggregationFactor)
+                    .reduce((a,b) => a + b, 0)
+                )
+            }
+            return simpleHistogram
+        },
+        drawHistogram(hist){
+            // this makes the canvas lines not blurry
+            const {clientWidth, clientHeight} = this.$refs.canvas
+            this.$refs.canvas.setAttribute('width', clientWidth)
+            this.$refs.canvas.setAttribute('height', clientHeight)
+
+            const maxFrequency = Math.max(...hist)
+            const minFrequency = Math.min(...hist)
+            const secondMaxFrequency = Math.max(...hist.filter((v) => v !== maxFrequency))
+            const shortenMaxFrequency = (
+                secondMaxFrequency > minFrequency
+                && (maxFrequency - secondMaxFrequency) > secondMaxFrequency / 3
+            )
+
+            const {width, height} = this.$refs.canvas
+            const ctx = this.$refs.canvas.getContext("2d");
+            const widthBetweenPoints = width / hist.length
+            ctx.clearRect(0, 0, width, height);
+            for (var i = 0; i < hist.length; i++) {
+                const frequency = hist[i]
+                const x0 = widthBetweenPoints * i
+                const x1 = widthBetweenPoints * (i + 1)
+                let y0 = height - (frequency / maxFrequency * height)
+                if(shortenMaxFrequency) {
+                    y0 = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
+                }
+                const y1 = height
+
+                ctx.rect(x0, y0, (x1 - x0), (y1 - y0))
+            }
+            ctx.fillStyle = "#888"
+            ctx.fill();
+        },
+        xPositionToValue(xPosition) {
+            const xProportion = (xPosition - this.xRange[0]) / (this.xRange[1] - this.xRange[0])
+            return Math.round(
+                (this.histogram.max - this.histogram.min) * xProportion + this.histogram.min
+            )
+        },
+        valueToXPosition(value) {
+            const xProportion = (value - this.histogram.min) / (this.histogram.max - this.histogram.min)
+            return Math.round(
+                (this.xRange[1] - this.xRange[0]) * xProportion + this.xRange[0]
+            )
+        },
+        validateHandleDrag(selected, newLocation) {
+            let moveX = true;
+            let moveY = false;
+            const handleName = selected.getAttribute("name")
+            const newValue = this.xPositionToValue(newLocation.x)
+             if (handleName === 'updateMin') {
+                if (!this.autoRange && newValue >= this.currentMax) {
+                    moveX = false;
+                } else if (this.autoRange && this.toDistributionPercentage(newValue) >= 50) {
+                    moveX = false;
+                }
+            } else if (handleName === 'updateMax') {
+                if (!this.autoRange && newValue <= this.currentMin) {
+                    moveX = false;
+                } else if (this.autoRange && this.toDistributionPercentage(newValue) <= 50) {
+                    moveX = false;
+                }
+            }
+
+            return [moveX, moveY]
+        },
+        dragHandle(selected, newLocation) {
+            let funcName = selected.getAttribute("name")
+            let newValue = this.xPositionToValue(newLocation.x)
+            if (this.autoRange !== undefined) {
+                newValue = this.toDistributionPercentage(newValue);
+                if (funcName == 'updateMax') {
+                    newValue = 100 - newValue
+                }
+                newValue = parseFloat(parseFloat(newValue).toFixed(2))
+                this.$emit('updateAutoRange', newValue)
+            } else {
+                if (funcName === 'updateMin') {
+                    this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
+                } else if (funcName === 'updateMax') {
+                    this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newLocation.x}`)
+                    this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${this.xRange[1] - newLocation.x}`)
+                }
+                this.$emit(funcName, newValue)
+            }
+        },
+        setHandlePosition(handle, position, exclusionBox, exclusionBoxPosition, exclusionBoxWidth) {
+            handle.setAttributeNS(null, 'x1', `${position}`)
+            handle.setAttributeNS(null, 'x2', `${position}`)
+            exclusionBox.setAttributeNS(null, 'x', `${exclusionBoxPosition}`)
+            exclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
+        },
+        fromDistributionPercentage(percentage) {
+            const numSamples = this.histogram.samples * percentage
+            let bucketIndex = 0
+            let sum = 0
+            this.histogram.hist.forEach((count, index) => {
+                sum += count
+                if (sum <= numSamples) {
+                    bucketIndex = index
+                }
+            })
+            return this.histogram.bin_edges[bucketIndex];
+
+        },
+        toDistributionPercentage(value) {
+            let numSamples = 0
+            this.histogram.hist.forEach((count, index) => {
+                if (value >= this.histogram.bin_edges[index]) {
+                    numSamples += count
+                }
+            })
+            return numSamples / this.histogram.samples * 100
+        },
+        updateFromInput(funcName, value) {
+            let roundedValue = undefined;
+            if (value) {
+                roundedValue = parseFloat(parseFloat(value).toFixed(2))
+            }
+            this.$emit(funcName, roundedValue)
+        },
+    },
+    mounted() {
+        this.fetchHistogram()
+    },
+    watch: {
+        histogram() {
+            // allow rerender to occur first
+            nextTick().then(() => {
+                this.xRange = [5, this.$refs.svg.clientWidth - 5]
+                this.vRange = [this.histogram.min, this.histogram.max]
+                this.$refs.minHandle.setAttributeNS(null, 'x1', `${this.xRange[0]}`);
+                this.$refs.minHandle.setAttributeNS(null, 'x2', `${this.xRange[0]}`);
+                this.$refs.maxHandle.setAttributeNS(null, 'x1', `${this.xRange[1]}`);
+                this.$refs.maxHandle.setAttributeNS(null, 'x2', `${this.xRange[1]}`);
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${this.xRange[1]}`)
+                this.drawHistogram(
+                    this.simplifyHistogram(this.histogram.hist)
+                );
+                makeDraggableSVG(
+                    this.$refs.svg,
+                    this.validateHandleDrag,
+                    this.dragHandle,
+                    this.xRange,
+                )
+            })
+        },
+        currentMin() {
+            const currentPosition = parseFloat(this.$refs.minHandle.getAttribute('x1'))
+            let newPosition = this.xRange[0]
+            if (this.currentMin) {
+                newPosition = this.valueToXPosition(this.currentMin)
+            }
+            if (newPosition !== currentPosition) {
+                this.setHandlePosition(
+                    this.$refs.minHandle,
+                    newPosition,
+                    this.$refs.minExclusionBox,
+                    5,
+                    newPosition - 5,
+                )
+            }
+        },
+        currentMax() {
+            const currentPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'))
+            let newPosition = this.xRange[1]
+            if(this.currentMax) {
+                newPosition = this.valueToXPosition(this.currentMax)
+            }
+            if (newPosition !== currentPosition) {
+                this.setHandlePosition(
+                    this.$refs.maxHandle,
+                    newPosition,
+                    this.$refs.maxExclusionBox,
+                    newPosition,
+                    this.xRange[1] - newPosition,
+                )
+            }
+        },
+        autoRange() {
+            if (!this.histogram) return
+            let newMinPosition = this.currentMin ? this.valueToXPosition(this.currentMin) : this.xRange[0]
+            let newMaxPosition = this.currentMax ? this.valueToXPosition(this.currentMax) : this.xRange[1]
+            if (this.autoRange) {
+                newMinPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage(this.autoRange / 100)
+                )
+                newMaxPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage((100 - this.autoRange) / 100)
+                )
+            }
+            this.setHandlePosition(
+                this.$refs.minHandle,
+                newMinPosition,
+                this.$refs.minExclusionBox,
+                5,
+                newMinPosition - 5,
+            )
+            this.setHandlePosition(
+                this.$refs.maxHandle,
+                newMaxPosition,
+                this.$refs.maxExclusionBox,
+                newMaxPosition,
+                this.xRange[1] - newMaxPosition,
+            )
+        }
+    }
+}
+</script>
+
+<template>
+    <div v-if="histogram">
+        <div class="range-editor">
+            <input
+                v-if="autoRange === undefined"
+                type="number"
+                class="input-80"
+                :min="histogram.min"
+                :max="currentMax"
+                :value="currentMin"
+                @input="(e) => updateFromInput('updateMin', e.target.value)"
+            >
+            <span v-else class="input-80"/>
+            <svg ref="svg" class="handles-svg">
+                <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
+                <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
+                <line
+                    class="draggable"
+                    name="updateMin"
+                    ref="minHandle"
+                    stroke="#000"
+                    stroke-width="4"
+                    x1="5" x2="5"
+                    y1="0" y2="30"
+                />
+                <text
+                    :x="this.xRange[1] && this.vRange[1] ? this.xRange[1] - (`${this.vRange[1]}`.length * 6): 0"
+                    y="43" class="small"
+                >{{ this.vRange[1] }}</text>
+                <rect ref="maxExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
+                <line
+                    class="draggable"
+                    name="updateMax"
+                    ref="maxHandle"
+                    stroke="#000"
+                    stroke-width="4"
+                    x1="5" x2="5"
+                    y1="0" y2="30"
+                />
+            </svg>
+            <canvas ref="canvas" class="canvas" />
+            <input
+                v-if="autoRange === undefined"
+                type="number"
+                class="input-80"
+                :max="histogram.max"
+                :min="currentMin"
+                :value="currentMax"
+                @input="(e) => updateFromInput('updateMax', e.target.value)"
+            >
+            <span
+                v-else
+                class="percentage-input"
+            >
+                <input
+                    type="number"
+                    class="input-80"
+                    :max="50"
+                    :min="0"
+                    :value="autoRange"
+                    @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
+                >
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.range-editor {
+    position: absolute;
+    display: flex;
+    height: 30px;
+    width: 100%;
+}
+.canvas {
+    width: calc(100% - 160px);
+    max-height: 100%;
+    padding: 0px 5px;
+}
+.handles-svg {
+    position: absolute;
+    left: 80px;
+    width: calc(100% - 160px);
+    height: calc(100% + 15px);
+}
+.draggable {
+  cursor: move;
+}
+</style>
diff --git a/girder/girder_large_image/web_client/vue/utils/clamp.js b/girder/girder_large_image/web_client/vue/utils/clamp.js
new file mode 100644
index 000000000..c738321f5
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/utils/clamp.js
@@ -0,0 +1,3 @@
+export default function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
diff --git a/girder/girder_large_image/web_client/vue/colors.js b/girder/girder_large_image/web_client/vue/utils/colors.js
similarity index 100%
rename from girder/girder_large_image/web_client/vue/colors.js
rename to girder/girder_large_image/web_client/vue/utils/colors.js
diff --git a/girder/girder_large_image/web_client/vue/utils/drag.js b/girder/girder_large_image/web_client/vue/utils/drag.js
new file mode 100644
index 000000000..4ccdaf707
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/utils/drag.js
@@ -0,0 +1,62 @@
+// Modified from https://www.w3schools.com/howto/howto_js_draggable.asp
+
+import clamp from './clamp';
+
+export function makeDraggableSVG(svg, validateDrag, callback, xRange) {
+    let selectedShape;
+    let posOffset;
+    svg.addEventListener('mousedown', startDrag);
+    window.addEventListener('mousemove', drag);
+    window.addEventListener('mouseup', endDrag);
+
+    function getMousePosition(evt) {
+        if (!svg) return {x: 0, y: 0};
+        const CTM = svg.getScreenCTM();
+        if (!CTM) return {x: 0, y: 0};
+        return {
+            x: (evt.clientX - CTM.e) / CTM.a,
+            y: (evt.clientY - CTM.f) / CTM.d
+        };
+    }
+
+    function startDrag(evt) {
+        const target = evt.target;
+        if (target && target.classList.contains('draggable')) {
+            selectedShape = target;
+            posOffset = getMousePosition(evt);
+            posOffset.x -= parseFloat(
+                selectedShape.getAttributeNS(null, 'x1') || '0'
+            );
+            posOffset.y -= parseFloat(
+                selectedShape.getAttributeNS(null, 'y1') || '0'
+            );
+        }
+    }
+
+    function drag(evt) {
+        if (selectedShape) {
+            evt.preventDefault();
+            const coord = getMousePosition(evt);
+            if (posOffset) {
+                coord.x -= posOffset.x;
+                coord.y -= posOffset.y;
+            }
+            coord.x = clamp(coord.x, xRange[0], xRange[1]);
+            const [moveX, moveY] = validateDrag(selectedShape, coord);
+            if (!moveX) {
+                coord.x = parseFloat(selectedShape.getAttributeNS(null, 'x1') || '0');
+            }
+            if (!moveY) {
+                coord.y = parseFloat(selectedShape.getAttributeNS(null, 'y1') || '0');
+            }
+
+            selectedShape.setAttributeNS(null, 'x1', `${coord.x}`);
+            selectedShape.setAttributeNS(null, 'x2', `${coord.x}`);
+            selectedShape.setAttributeNS(null, 'y1', `${coord.y}`);
+            callback(selectedShape, coord);
+        }
+    }
+    function endDrag() {
+        selectedShape = undefined;
+    }
+}